/* ============================================================
   AUTOMART V43.9
   PRICE HISTORY / MARKET PRICE ANALYSIS
   RESPONSIVE DESKTOP + MOBILE
   ============================================================ */

.am-v439-price-history {

    position:relative;

    width:100%;

    margin:
        30px 0 30px;

    padding:
        24px;

    border:
        1px solid #e0e9e4;

    border-radius:22px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(13,157,88,.055),
            transparent 25%
        ),
        #fff;

    box-shadow:
        0 12px 34px
        rgba(13,43,29,.055);

    box-sizing:border-box;

    overflow:hidden;
}


/* ============================================================
   HEADING
   ============================================================ */

.am-v439-price-history__head {

    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:24px;

    margin-bottom:15px;
}


.am-v439-price-history__eyebrow {

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:7px;

    color:#0b8d55;

    font-size:11px;
    line-height:1;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.am-v439-price-history__eyebrow::before {

    content:"";

    width:25px;
    height:2px;

    border-radius:999px;

    background:#0ca15d;
}


.am-v439-price-history__head h2 {

    margin:0 0 6px;

    color:#101c2b;

    font-size:25px;
    line-height:1.12;

    font-weight:850;

    letter-spacing:-.025em;
}


.am-v439-price-history__head p {

    max-width:700px;

    margin:0;

    color:#657386;

    font-size:12px;
    line-height:1.55;
}


.am-v439-price-history__head p strong {

    color:#273548;

    font-weight:750;
}


.am-v439-price-history__head-meta {

    flex:0 0 auto;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:6px;
}


.am-v439-price-history__head-meta span {

    display:inline-flex;

    align-items:center;

    min-height:28px;

    padding:
        0 10px;

    border-radius:999px;

    background:#eef8f3;

    color:#08764a;

    font-size:11px;

    font-weight:800;
}


.am-v439-price-history__head-meta b {

    color:#718095;

    font-size:10px;

    font-weight:700;
}


/* ============================================================
   MATCH QUALITY NOTICE
   ============================================================ */

.am-v439-price-history__notice {

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:16px;

    padding:
        10px 12px;

    border:
        1px solid #e3ebe7;

    border-radius:12px;

    background:#f8fbf9;
}


.am-v439-price-history__notice > span {

    flex:0 0 22px;

    width:22px;
    height:22px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#e4f5ec;

    color:#087b4a;

    font-size:11px;

    font-weight:850;
}


.am-v439-price-history__notice p {

    margin:0;

    color:#667688;

    font-size:11px;
    line-height:1.4;
}


/* ============================================================
   CHART CARD
   ============================================================ */

.am-v439-price-history__chart-card {

    padding:
        17px 17px 14px;

    border:
        1px solid #e4ebe7;

    border-radius:17px;

    background:#fbfcfc;

    overflow:hidden;
}


.am-v439-price-history__chart-head {

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:8px;
}


.am-v439-price-history__chart-head > div:first-child {

    display:flex;

    flex-direction:column;

    gap:3px;
}


.am-v439-price-history__chart-head strong {

    color:#152232;

    font-size:13px;

    font-weight:800;
}


.am-v439-price-history__chart-head small {

    color:#7a8797;

    font-size:10px;
}


.am-v439-price-history__legend {

    display:flex;

    align-items:center;

    gap:14px;
}


.am-v439-price-history__legend span {

    display:flex;

    align-items:center;

    gap:6px;

    color:#708091;

    font-size:10px;

    font-weight:650;
}


.am-v439-price-history__legend i {

    width:8px;
    height:8px;

    border-radius:50%;

    background:#9caea4;
}


.am-v439-price-history__legend
.is-current i {

    width:10px;
    height:10px;

    background:#0aa15d;

    box-shadow:
        0 0 0 4px
        rgba(10,161,93,.12);
}


/* ============================================================
   CHART SCROLLER
   ============================================================ */

.am-v439-price-history__chart-scroll {

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;

    scrollbar-color:
        #d7e4dd transparent;
}


.am-v439-price-history__chart-scroll::-webkit-scrollbar {

    height:5px;
}


.am-v439-price-history__chart-scroll::-webkit-scrollbar-thumb {

    border-radius:999px;

    background:#d7e4dd;
}


.am-v439-price-history__chart {

    display:block;

    min-width:760px;

    max-width:none;
}


/* SVG */

.am-v439-chart-grid {

    stroke:#e8eeeb;

    stroke-width:1;

    stroke-dasharray:
        4 5;
}


.am-v439-chart-y-label {

    fill:#8b98a7;

    font-size:10px;

    font-weight:650;
}


.am-v439-chart-line-shadow {

    fill:none;

    stroke:
        rgba(12,155,89,.11);

    stroke-width:8;

    stroke-linejoin:round;

    stroke-linecap:round;
}


.am-v439-chart-line {

    fill:none;

    stroke:#0b9b59;

    stroke-width:2.5;

    stroke-linejoin:round;

    stroke-linecap:round;
}


.am-v439-chart-point {

    cursor:pointer;

    outline:none;
}


.am-v439-chart-point-dot {

    fill:#fff;

    stroke:#799388;

    stroke-width:2.5;

    transition:
        transform .16s ease,
        stroke .16s ease,
        fill .16s ease;
}


.am-v439-chart-point:hover
.am-v439-chart-point-dot,

.am-v439-chart-point.is-selected
.am-v439-chart-point-dot {

    fill:#eff9f4;

    stroke:#0a9c59;

    transform:scale(1.18);
}


.am-v439-chart-point.is-current
.am-v439-chart-point-dot {

    fill:#0aa15d;

    stroke:#fff;

    stroke-width:2.5;
}


.am-v439-chart-current-halo {

    fill:
        rgba(10,161,93,.12);

    stroke:
        rgba(10,161,93,.24);

    stroke-width:1;
}


.am-v439-chart-current-core {

    fill:#fff;
}


.am-v439-chart-price-label {

    fill:#344457;

    font-size:10px;

    font-weight:800;
}


.am-v439-chart-point.is-current
.am-v439-chart-price-label {

    fill:#07844c;
}


.am-v439-chart-rank {

    fill:#8a98a7;

    font-size:9px;

    font-weight:700;
}


.am-v439-chart-edge-label {

    fill:#718095;

    font-size:9px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;
}


/* ============================================================
   MOBILE SWIPE COPY
   ============================================================ */

.am-v439-price-history__swipe {

    display:none;

    padding:
        6px 0 0;

    text-align:center;

    color:#83908f;

    font-size:9px;

    font-weight:650;
}


/* ============================================================
   SELECTED POINT DETAIL
   ============================================================ */

.am-v439-price-history__selected {

    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(0,1.5fr)
        auto;

    align-items:center;

    gap:18px;

    margin-top:11px;

    padding:
        12px;

    border:
        1px solid #e2ebe6;

    border-radius:13px;

    background:#fff;
}


.am-v439-price-history__selected-main {

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:3px;
}


.am-v439-price-history__selected-badge {

    width:max-content;

    min-height:21px;

    display:inline-flex;

    align-items:center;

    padding:
        0 7px;

    border-radius:999px;

    background:#eaf7f0;

    color:#087a49;

    font-size:9px;

    font-weight:800;
}


.am-v439-price-history__selected-main
> strong {

    max-width:100%;

    margin-top:2px;

    color:#142132;

    font-size:12px;

    line-height:1.25;

    font-weight:800;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


.am-v439-price-history__selected-main
> b {

    color:#078c50;

    font-size:17px;
    line-height:1.15;

    font-weight:900;
}


.am-v439-price-history__selected-facts {

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:8px;
}


.am-v439-price-history__selected-facts
> span {

    min-width:0;

    padding:
        7px 8px;

    border-radius:9px;

    background:#f8faf9;
}


.am-v439-price-history__selected-facts small {

    display:block;

    margin-bottom:2px;

    color:#84909e;

    font-size:8px;
}


.am-v439-price-history__selected-facts b {

    display:block;

    color:#273547;

    font-size:10px;

    font-weight:750;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}


.am-v439-price-history__selected
> a {

    min-height:38px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    padding:
        0 13px;

    border:
        1px solid #0b9b59;

    border-radius:10px;

    background:#fff;

    color:#087848;

    text-decoration:none;

    font-size:10px;

    font-weight:800;

    white-space:nowrap;
}


.am-v439-price-history__selected
> a:hover {

    background:#f1faf5;
}


.am-v439-price-history__selected
> a.is-current {

    border-color:#dfe7e3;

    background:#f7faf8;

    color:#7a8780;

    pointer-events:none;
}


/* ============================================================
   STATS
   ============================================================ */

.am-v439-price-history__stats {

    display:grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:10px;

    margin-top:13px;
}


.am-v439-price-history__stats
> div {

    min-width:0;

    position:relative;

    padding:
        12px 13px;

    border:
        1px solid #e3ebe7;

    border-radius:13px;

    background:#fff;

    overflow:hidden;
}


.am-v439-price-history__stats
> div.is-current {

    border-color:#cfeadd;

    background:
        linear-gradient(
            145deg,
            #f3fbf7,
            #fff
        );
}


.am-v439-stat-icon {

    position:absolute;

    top:10px;
    right:10px;

    width:24px;
    height:24px;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:#f0f6f3;

    color:#0b8650;

    font-size:11px;

    font-weight:850;
}


.am-v439-price-history__stats small {

    display:block;

    margin-bottom:5px;

    padding-right:27px;

    color:#7c8997;

    font-size:9px;

    font-weight:700;
}


.am-v439-price-history__stats strong {

    display:block;

    margin-bottom:4px;

    color:#172535;

    font-size:15px;

    font-weight:850;

    white-space:nowrap;
}


.am-v439-price-history__stats
.is-current strong {

    color:#078a4e;
}


.am-v439-price-history__stats em {

    display:block;

    color:#98a29c;

    font-size:8px;

    font-style:normal;

    font-weight:600;
}


/* ============================================================
   DISCLOSURE
   ============================================================ */

.am-v439-price-history__footer-note {

    display:flex;

    align-items:flex-start;

    gap:8px;

    margin-top:12px;

    color:#84918d;
}


.am-v439-price-history__footer-note
> span {

    flex:0 0 auto;

    color:#138153;

    font-size:13px;
}


.am-v439-price-history__footer-note p {

    margin:0;

    font-size:9px;
    line-height:1.5;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.am-v439-price-history__empty {

    display:flex;

    align-items:center;

    gap:14px;

    min-height:120px;

    padding:
        20px;

    border:
        1px dashed #d7e3dc;

    border-radius:15px;

    background:#fafcfb;
}


.am-v439-price-history__empty
> span {

    flex:
        0 0 44px;

    width:44px;
    height:44px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#edf7f1;

    color:#0a8b51;

    font-size:19px;
}


.am-v439-price-history__empty strong {

    display:block;

    margin-bottom:4px;

    color:#172535;

    font-size:13px;
}


.am-v439-price-history__empty p {

    margin:0;

    color:#748193;

    font-size:11px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media screen and (max-width:1023px) {

    .am-v439-price-history {

        margin:
            24px 0;

        padding:
            19px;

        border-radius:18px;
    }


    .am-v439-price-history__stats {

        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }


    .am-v439-price-history__selected {

        grid-template-columns:
            1fr
            1fr;
    }


    .am-v439-price-history__selected
    > a {

        grid-column:
            1 / -1;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width:767px) {

    .am-v439-price-history {

        width:100%;

        margin:
            18px 0 22px;

        padding:
            15px 12px;

        border-radius:16px;

        box-shadow:
            0 6px 18px
            rgba(13,43,29,.04);
    }


    /* HEADER */

    .am-v439-price-history__head {

        display:block;

        margin-bottom:11px;
    }


    .am-v439-price-history__eyebrow {

        font-size:9px;
    }


    .am-v439-price-history__head h2 {

        font-size:20px;
    }


    .am-v439-price-history__head p {

        font-size:10.5px;

        line-height:1.5;
    }


    .am-v439-price-history__head-meta {

        flex-direction:row;

        align-items:center;

        justify-content:flex-start;

        flex-wrap:wrap;

        gap:7px;

        margin-top:10px;
    }


    .am-v439-price-history__head-meta
    span {

        min-height:25px;

        font-size:9.5px;
    }


    .am-v439-price-history__head-meta
    b {

        font-size:9px;
    }


    /* NOTICE */

    .am-v439-price-history__notice {

        align-items:flex-start;

        padding:
            9px;

        margin-bottom:11px;
    }


    .am-v439-price-history__notice p {

        font-size:9.5px;
    }


    /* CHART */

    .am-v439-price-history__chart-card {

        padding:
            12px 9px 10px;

        border-radius:13px;
    }


    .am-v439-price-history__chart-head {

        display:block;

        margin-bottom:4px;
    }


    .am-v439-price-history__chart-head
    strong {

        font-size:11px;
    }


    .am-v439-price-history__chart-head
    small {

        font-size:9px;
    }


    .am-v439-price-history__legend {

        gap:10px;

        margin-top:8px;
    }


    .am-v439-price-history__legend
    span {

        font-size:9px;
    }


    .am-v439-price-history__chart-scroll {

        margin-top:5px;

        scroll-snap-type:
            x proximity;

        overscroll-behavior-x:
            contain;
    }


    .am-v439-price-history__chart {

        min-width:720px;

        height:280px;
    }


    .am-v439-price-history__swipe {

        display:block;
    }


    /* SELECTED VEHICLE */

    .am-v439-price-history__selected {

        display:block;

        margin-top:8px;

        padding:
            10px;
    }


    .am-v439-price-history__selected-main {

        margin-bottom:9px;
    }


    .am-v439-price-history__selected-main
    > strong {

        white-space:normal;

        font-size:11px;
    }


    .am-v439-price-history__selected-main
    > b {

        font-size:16px;
    }


    .am-v439-price-history__selected-facts {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        margin-bottom:9px;
    }


    .am-v439-price-history__selected-facts
    > span:last-child {

        grid-column:
            1 / -1;
    }


    .am-v439-price-history__selected
    > a {

        width:100%;

        min-height:38px;

        box-sizing:border-box;
    }


    /* STATS = 2 COLUMNS */

    .am-v439-price-history__stats {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:8px;

        margin-top:10px;
    }


    .am-v439-price-history__stats
    > div {

        padding:
            10px;
    }


    .am-v439-price-history__stats
    > div.is-current {

        border-color:#bfe3d2;
    }


    .am-v439-price-history__stats
    strong {

        font-size:13px;
    }


    /*
     * Highest gets full width when total cards = 5.
     */

    .am-v439-price-history__stats
    > div:last-child {

        grid-column:
            1 / -1;
    }


    .am-v439-price-history__footer-note {

        margin-top:9px;
    }


    .am-v439-price-history__footer-note p {

        font-size:8.5px;
    }


    /* Account for existing mobile contact bar */

    body:has(.vehicle-detail-page)
    .am-v439-price-history {

        scroll-margin-bottom:
            110px;
    }

}


/* ============================================================
   VERY SMALL PHONE
   ============================================================ */

@media screen and (max-width:360px) {

    .am-v439-price-history {

        padding:
            13px 10px;
    }


    .am-v439-price-history__stats {

        gap:6px;
    }


    .am-v439-price-history__stats
    > div {

        padding:
            9px;
    }


    .am-v439-price-history__stats
    strong {

        font-size:12px;
    }

}