@import "action-buttons.css";

@media print {
    @page {
        size: letter landscape;
    }
    header.header, .js-sticky-bar, .section__head, .section__title, .vin-link, .feedback3-container, .sticker_debug, .debug-help, #debug_queries {
        display: none !important;
    }
}

#pdf-iframe {
    min-height: 91rem;
}

/*body {*/
/*    background-color: #e3d2bc;  !** temporary **!*/
/*}*/

.main, .section-sticker, .recreated-sticker {
    /* To ensure that page can be scrolled sideways if window is too narrow. */
    display: inline-block;
    min-width: 100vw;

    @media print {
        min-width: inherit;
        display: block;
    }
}

.chrome-sticker-v2 {

    width: 1637px;
    min-height: 1100px;
    font-size: 16px;
    margin: auto;
    background-color: #fff;

    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;

    /* For elements inside the sticker, you should specify relative dimensions (using em not px). This is to
     ensure that the print view has the same proportions as the screen view. */

    table.main-table {
        width: 100%;
        min-height: 1100px;

        thead {
            display: table-header-group;
        }
        tbody {
            display: table-row-group;
        }
        tfoot {
            display: table-footer-group;
        }

        thead {
            tr:first-of-type {
                border-bottom: 1px solid #D2D5D7;
            }
            th {
                padding: 0.8em 0 0 0;
            }

            th .sticker-head {
                height: 10em;

                .container {
                    display: inline-block;
                    height: 100%;
                    overflow: hidden;
                    text-align: left;
                    vertical-align: middle;
                }
                .oem-logo-container {
                    width: 15%;
                    padding-left: 1.5%;
                    div {
                        height: 8em;
                        width: 11em;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }
                }
                .oem-logo {
                    height: 8.2em;
                }
                .title-container {
                    width: 52%;
                    h2 {
                        text-transform: uppercase;
                        font-weight: 600;
                        margin: 1.3em 0 0 0;
                        font-size: 1.8em;
                    }
                    p {
                        font-weight: 500;
                        font-size: 1.2em;
                    }
                }
                .highlight-items-container {
                    width: 32%;
                    column-count: 2;
                    padding-top: 3em;
                    li {
                        font-weight: 400;
                    }
                }
            }
        }
        tbody {
            tr {
                height: 100%;
            }
            td {
                vertical-align: top;
                height: 100%;
            }
            td:first-of-type {
                width: 66%;
                overflow: hidden;
            }
            td:last-of-type {

            }
            h4 {
                font-size: 1.3em;
            }
            h5 {
                font-size: 1.2em;
            }
            h6 {
                font-size: 1.1em;
                margin-top: 1em;
                margin-bottom: 0;
                text-transform: uppercase;
            }
            .small-print {
                font-size: 0.9em;
            }
            .safety-small-print {
                font-size: 0.7em;
                p {
                    padding: 0.2em 1.0em 0 1.6em;
                    margin: 0;
                    line-height: 1em;
                }
            }
            .package_options_list {
                margin-left: 1em;
                margin-bottom: 0.5em;
            }

            .main-cols {
                padding: 0.8em;
                column-count: 3;
                column-gap: 1.9em;
                column-rule: 2px solid #D2D5D7;
                min-height: 63em;
            }
            .main-cols.summary-view {
                height: 63em;
                column-fill: auto; /* shift content to the left - only works when height is fixed */
            }

            .right-col {
                padding: 0 0.5em;
                height: 100%;
                margin-top: 0.5em;
            }

            .card-new {
                border: 0.2em solid #333333;

                .card__head {
                    position: relative;
                    color: #fff;
                    background: #333;
                    h4 {
                        margin-bottom: 0;
                        font-size: 1.2em;
                        font-weight: 900;
                        text-transform: uppercase;
                        letter-spacing: 0.01em;
                    }
                    span {
                        position: relative;
                        color: #333;
                        font-size: 1.1em;
                        font-weight: 900;
                        display: flex;
                        align-items: center;
                        gap: 1.7em;
                        padding: 0.2em;

                        img:not([class]) {
                            max-width: 1.1em;
                        }
                        img.card__head-block-back {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            max-width: 100%;
                            height: 100%;
                            z-index: -1;
                            object-fit: cover;
                        }
                    }
                }
                .card__head-wrapper {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0.2em 0.2em 0.4em 0.2em;
                    position: relative;
                    z-index: 2;
                }
                .card__body {
                    padding: 0.8em;
                    font-weight: 600;
                }
                .card__body-entries {
                    margin-inline: auto;
                    display: grid;
                    justify-content: center;
                    grid-template-columns: 10% 39% 35%;
                    gap: 2em;
                    .card__body-entry {
                        h1 {
                            font-size: 4.2em;
                            margin-bottom: 0;
                            line-height: 1;
                            color: #333333;
                            font-weight: 700;
                        }
                        h6 {
                            font-weight: 900;
                        }
                        ul {
                            display: flex;
                            gap: 2em;
                            font-weight: 700;
                        }
                        .fuel-pump-icon {
                            height: 3em;
                            margin-top: 0.6em;
                        }
                    }
                }
                .card__body-row {
                    font-size: 0.9em;
                    line-height: 1.5;
                    letter-spacing: -0.01em;
                    h5 {
                        display: grid;
                        align-items: center;
                        justify-content: space-between;
                        grid-auto-flow: column;
                        width: 100%;
                        margin-bottom: 0;
                        line-height: 1;
                        padding-right: 1.6em;
                        strong {
                            font-weight: 900;
                            letter-spacing: 0.01em;
                        }
                    }
                    h5:has(> :nth-child(3)) {
                        grid-auto-columns: 1fr 1fr auto;
                    }
                    p {
                        margin: 0;
                        line-height: 1.2em;
                    }
                }
                .card__body-row + .card__body-row {
                    margin-top: 0.7em;
                    padding-top: 0.7em;
                    border-top: 0.15em solid rgba(0, 0, 0, .8);
                }
                .fuel-economy-badge {
                    height: 1.8em;
                    font-size: 0.8em;
                    line-height: 1.0em;
                    margin-top: -0.3em;
                    hr {
                        height: 0.19em;
                        margin: 0 0 0.2em 0;
                        background-color: #fff;
                    }
                }
                h6 {
                    margin-top: 0;
                }
                h5 {
                    margin-bottom: 0;
                    font-weight: 900;
                }
            }

            .msrp-container {

                .price {
                    float: right;
                }
                .package_name {
                    margin: 0.4em 0;
                    display: grid;
                    grid-template-columns: 1fr 4em;
                    grid-gap: 0.5em;
                    line-height: 1.1em;
                    .price {
                        float: none;
                        text-align: right;
                    }
                }
                .destination {
                    margin-top: 0.7em;
                }
                .total-price {
                    margin-top: 0.7em;
                }
                .summary-specs {
                    break-inside: auto;
                }
            }
            .vehicle-details {
                margin-top: 2em;
                break-inside: avoid;
            }
            .fuel-econ-container {
                margin-bottom: 0.5em;
                .card__head-wrapper {
                    display: grid;
                    grid-template-columns: 1.6em 10fr 18em;
                    grid-gap: 0.5em;
                }
                .card-new {
                    border-radius: 0 0.7em 0.7em 0.7em;
                }
            }
            .qr-code-container {
                height: 13.7em;
                border: 0.2em solid #000;

                .qr-code {
                    display: inline-block;
                    vertical-align: top;
                    height: 13em;
                    width: 13em;
                    margin-top: 0.2em;
                }
                .isc-logo_bw {
                    display: block;
                    margin-bottom: 1.3em;
                }
                .qr-code-label {
                    width: 12.2em;
                    display: inline-block;
                    font-size: 1.3em;
                    margin-top: 2.1em;
                    margin-left: 2.5em;
                    font-weight: 600;
                }
            }
            .summary-specs {
                break-inside: avoid;
            }
            .summary-specs, .full-specs {
                max-width: 21em;
                h4 {
                    margin-top: 2em;
                }
            }
            .pollution-score {
                border-top: 0.2em solid #000;
                display: flex;
                gap: 1.8em;
                padding-top: 0.8em;

                .pollution-score__item {
                    flex: 1 1 0;
                    min-width: 0;
                }
                .pollution-score__item:first-child {
                    min-width: 65%;
                }
                .pollution-score__label {
                    font-size: 0.7em;
                    font-weight: 600;
                    margin-bottom: 2.0em;
                }
                .pollution-score__bar {
                    display: block;
                }
                .pollution-score__min,
                .pollution-score__max {
                    font-size: 0.8em;
                    font-weight: 600;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 1;
                    color: #fff;
                    background-color: #000;
                    width: 3em;
                    display: inline-block;
                    text-align: center;
                }
                .pollution-score__min {
                    left: 0;
                    border-radius: 0.7em 0 0 0.7em;
                }
                .pollution-score__max {
                    right: 0;
                    border-radius: 0 0.7em 0.7em 0;
                }
                .pollution-score__track {
                    background: linear-gradient(90deg, #bcd5e8 0%, #dfeaf5 100%);
                    border: 0.1em solid #000;
                    border-radius: 0.7em;
                    height: 1.2em;;
                    position: relative;
                    width: 100%;

                }
                .pollution-score__value {
                    align-items: center;
                    background-color: #000;
                    border-radius: 0.7em 0.7em 0 0;
                    color: #fff;
                    display: inline-flex;
                    font-size: 0.8em;
                    font-weight: 700;
                    height: 2.0em;
                    justify-content: center;
                    min-width: 2.0em;
                    padding: 0 0.4em;
                    position: absolute;
                    top: -1.5em;
                    transform: translateX(-50%);
                }
                .pollution-score__value--empty {
                    background-color: transparent;
                    border: 0;
                    color: transparent;
                    padding: 0;
                }
            }
        }
    }
}

header.header {
    margin-bottom: 0;
}

.section-sticker {
    .section__body {
        padding-block: 0;
    }
    .section__head {
        background: #F8FAFB;
        padding-block: 13px;
        font-size: 14px;
        line-height: 1.14;
        font-weight: 600;
        select {
            padding: 0 10px;
            background: white;
            border-radius: 7px;
            border: thin solid #ccc;
        }
    }
    .section__title {
        margin-bottom: 35px;
        h2 {
            display: inline;
        }
    }
}

.section__body.vin-link {
    padding-bottom: 4rem;
    padding-top: 4.5rem;
    text-align: center;
    background-color: #F8FAFB;
}
h1.window-sticker-bonus {
    font-weight: 600;
    font-size: 30px;
    margin-bottom: 2.2rem !important;
}