/* ============================================================
   AUTOMART V45.0
   HOMEPAGE VEHICLE FINDER MARKET TABS

   Scoped entirely to:
       [data-am-v450-finder]

   Global header / V44.3 untouched.
   ============================================================ */


/* ============================================================
   MARKET SWITCH WRAPPER
   ============================================================ */

[data-am-v450-finder]
.am-v450-market {

    margin:
        16px 0 14px;

    padding:4px;

    display:grid;

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

    gap:4px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:14px;

    background:
        rgba(255,255,255,.075);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.05);
}


/* ============================================================
   TAB
   ============================================================ */

[data-am-v450-finder]
.am-v450-market__tab {

    position:relative;

    min-height:56px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:10px;

    padding:
        8px 13px;

    border:0;

    border-radius:11px;

    background:
        transparent;

    color:
        rgba(255,255,255,.78);

    cursor:pointer;

    text-align:left;

    font-family:inherit;

    transition:
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


[data-am-v450-finder]
.am-v450-market__tab:hover {

    background:
        rgba(255,255,255,.07);

    color:#fff;
}


[data-am-v450-finder]
.am-v450-market__tab:active {

    transform:
        scale(.985);
}


/* ============================================================
   TAB ICON
   ============================================================ */

[data-am-v450-finder]
.am-v450-market__icon {

    flex:
        0 0 34px;

    width:34px;
    height:34px;

    display:grid;

    place-items:center;

    border-radius:10px;

    background:
        rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.84);
}


[data-am-v450-finder]
.am-v450-market__icon svg {

    width:18px;
    height:18px;

    display:block;
}


/* ============================================================
   LABEL
   ============================================================ */

[data-am-v450-finder]
.am-v450-market__copy {

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:1px;
}


[data-am-v450-finder]
.am-v450-market__copy strong {

    color:inherit;

    font-size:12px;

    line-height:1.25;

    font-weight:800;
}


[data-am-v450-finder]
.am-v450-market__copy small {

    color:
        rgba(255,255,255,.52);

    font-size:9px;

    line-height:1.3;

    font-weight:500;
}


/* ============================================================
   ACTIVE STATE
   Restrained mint/white rather than heavy green.
   ============================================================ */

[data-am-v450-finder]
.am-v450-market__tab[aria-selected="true"] {

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f0f8f4
        );

    color:#08794a;

    box-shadow:
        0 6px 18px
        rgba(0,0,0,.11);
}


[data-am-v450-finder]
.am-v450-market__tab[aria-selected="true"]
.am-v450-market__icon {

    background:#e2f4ea;

    color:#07804c;
}


[data-am-v450-finder]
.am-v450-market__tab[aria-selected="true"]
.am-v450-market__copy small {

    color:#688176;
}


/* ============================================================
   ACTIVE CHECK
   ============================================================ */

[data-am-v450-finder]
.am-v450-market__check {

    width:17px;
    height:17px;

    margin-left:auto;

    flex:
        0 0 17px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#079754;

    color:#fff;

    font-size:10px;

    font-weight:900;

    opacity:0;

    transform:
        scale(.7);

    transition:
        opacity .16s ease,
        transform .16s ease;
}


[data-am-v450-finder]
.am-v450-market__tab[aria-selected="true"]
.am-v450-market__check {

    opacity:1;

    transform:
        scale(1);
}


/* ============================================================
   CONTEXT / RECOMMENDATION LINE
   ============================================================ */

[data-am-v450-finder]
.am-v450-market-context {

    min-height:20px;

    margin:
        -3px 0 13px;

    display:flex;

    align-items:center;

    gap:7px;

    color:
        rgba(255,255,255,.68);

    font-size:10px;

    line-height:1.45;
}


[data-am-v450-finder]
.am-v450-market-context__dot {

    width:6px;
    height:6px;

    flex:
        0 0 6px;

    border-radius:50%;

    background:#22c878;

    box-shadow:
        0 0 0 3px
        rgba(34,200,120,.11);
}


/* ============================================================
   SUBTLE MARKET STATE ON SEARCH BUTTON
   Existing green button remains the visual authority.
   ============================================================ */

[data-am-v450-finder]
[data-am-v450-search-button] {

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


[data-am-v450-finder]
[data-am-v450-search-button]:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 22px
        rgba(0,170,93,.18);
}


/* ============================================================
   OPTIONAL MARKET BADGE BESIDE VEHICLE FINDER HEADING
   ============================================================ */

[data-am-v450-finder]
.am-v450-market-badge {

    display:inline-flex;

    align-items:center;

    min-height:22px;

    padding:
        3px 8px;

    margin-left:7px;

    border:
        1px solid
        rgba(110,219,163,.22);

    border-radius:999px;

    background:
        rgba(15,145,82,.12);

    color:#c8f3dc;

    vertical-align:middle;

    font-size:8px;

    line-height:1;

    font-weight:750;

    letter-spacing:.01em;
}


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

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

    [data-am-v450-finder]
    .am-v450-market {

        margin:
            13px 0 11px;

        border-radius:12px;
    }


    [data-am-v450-finder]
    .am-v450-market__tab {

        min-height:51px;

        gap:7px;

        padding:
            7px 9px;

        border-radius:9px;
    }


    [data-am-v450-finder]
    .am-v450-market__icon {

        flex-basis:30px;

        width:30px;
        height:30px;

        border-radius:8px;
    }


    [data-am-v450-finder]
    .am-v450-market__icon svg {

        width:16px;
        height:16px;
    }


    [data-am-v450-finder]
    .am-v450-market__copy strong {

        font-size:11px;
    }


    [data-am-v450-finder]
    .am-v450-market__copy small {

        font-size:8px;
    }


    [data-am-v450-finder]
    .am-v450-market__check {

        width:15px;
        height:15px;

        flex-basis:15px;

        font-size:9px;
    }


    [data-am-v450-finder]
    .am-v450-market-context {

        margin-bottom:10px;

        font-size:9px;
    }

}


/* ============================================================
   EXTRA-SMALL MOBILE
   Keep two equal tabs; remove subtitle rather than stack.
   ============================================================ */

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

    [data-am-v450-finder]
    .am-v450-market__copy small {

        display:none;
    }


    [data-am-v450-finder]
    .am-v450-market__tab {

        min-height:46px;
    }

}