﻿.contact-bottom {
    display: none;
}

.rfq-travel-mobile {
    display: none !important;
    text-align: center;
}

.rfq-travel-mobile__get-quote-button {
    padding: 8px 55px;
    display: block;
    margin: 8px auto;
    width: auto;
    font-weight: normal;
    font-size: 13px;
}

.rfq-travel-mobile__message-supplier-button {
    display: block;
    margin-top: 5px;
    float: none !important;
    margin-bottom: 8px;
}

.product-supplier-call-container {
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 0px;
    cursor: pointer;
}

.product-supplier-call-container img {
    margin-right: 5px;
}

.product-supplier-call-container a {
    text-decoration: underline;
    cursor: pointer;
    color: #3a8cce;
}

.product-supplier-call-container a.contact-info {
    margin-right: 20px;
    padding: 8px 55px;
    font-size: 13px;
}

.product-supplier-call-container a.contact-info.mobile {
    margin-right: 21px;
}

.product-supplier-call-container a:hover {
    color: #888;
}

@media screen and (max-width: 500px) {
    .rfq-travel-mobile__text {
        font-size: 13px;
        margin-top: 8px;
    }
}

@media screen and (max-width: 768px) {
    .rfq-travel-mobile {
        display: block !important;
    }

    .contact-bottom {
        width: 100%;
        background-color: #fff;
        z-index: 999;
        display: flex;
        justify-content: center;
        box-shadow: 0px -4px 3px #e2e3e8;
        position: fixed;
        left: 0;
        bottom: 0;
        /* env() clears the iPhone home-indicator when viewport-fit=cover is set; 0 fallback keeps it
           at 11px everywhere else. */
        padding: 0 0 calc(11px + env(safe-area-inset-bottom, 0px)) 0;
        /* Promote the bar to its own GPU compositing layer. A plain position:fixed;bottom:0 bar with a
           box-shadow repaints on the main thread during scroll on iOS, so the bottom edge appears to
           get clipped while the browser toolbar collapses/expands and only settles once you scroll the
           other way. translateZ(0) pins it to a stable layer so its height/position never changes. */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform;
    }
}