/**
 * Browser compatibility layer.
 *
 * This file is loaded after the core layout CSS and contains only targeted
 * fallbacks for Safari/WebKit and Internet Explorer. Keep Chrome behavior as
 * defined in base.css, main.css and the responsive files.
 */

:root {
    --kareta-font-ui-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Inter", Arial, sans-serif;
    --bs-font-sans-serif: var(--kareta-font-ui-sans);
    --bs-body-font-family: var(--kareta-font-ui-sans);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;
}

html,
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * WebKit can re-apply text autosizing inside nested flex/grid columns. Keep the
 * app-level type scale stable on shared surfaces.
 */
.public-page-wrapper,
.main-content,
.card,
.card-body,
.modal,
.modal-content,
.offcanvas,
.offcanvas-body,
.table-responsive,
.chat-container,
.custom-select-button,
.form-control,
.form-select,
.btn,
.public-page-wrapper .car-card,
.public-page-wrapper .car-card-body,
.public-page-wrapper .car-card .car-spec-item {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: inherit;
}

/*
 * Safari keeps min-width:auto more aggressively in nested flex/grid children.
 * These are shared containers where Chrome already behaves as intended.
 */
.card,
.card-body,
.modal-body,
.offcanvas-body,
.table-responsive,
.chat-container,
.chat-body,
.chat-header,
.chat-input,
.message,
.message-text,
.cars-grid,
.cars-grid > *,
.public-page-wrapper .car-card,
.public-page-wrapper .filter-sidebar,
.public-page-wrapper .filter-section,
.kareta-spec-row,
.kareta-spec-content,
.spare-parts-cart-item,
.spare-parts-cart-item > * {
    min-width: 0;
}

/* SVG/icon baseline differences are visible in compact buttons and chips. */
svg,
.bi,
[class^="bi-"],
[class*=" bi-"],
.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
    line-height: 1;
    vertical-align: middle;
}

svg {
    flex-shrink: 0;
}

/* Safari/WebKit: keep custom controls visually stable across iOS/macOS. */
button,
input,
select,
textarea {
    font: inherit;
}

button,
.btn,
.custom-select-button,
.chat-input__field {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"] {
    -webkit-appearance: textfield;
}

/* Safari: sticky inside scrollable/flex containers needs the prefixed value. */
.chat-input,
.filters-offcanvas-footer,
.public-page-wrapper .filter-sidebar {
    position: -webkit-sticky;
    position: sticky;
}

/* Fallback for browsers without flex gap support, including old Safari. */
@supports not (gap: 1rem) {
    .btn > i,
    .btn > .bi,
    .btn > .fa,
    .btn > .fas {
        margin-right: 0.375rem;
    }

    .btn > i:last-child,
    .btn > .bi:last-child,
    .btn > .fa:last-child,
    .btn > .fas:last-child {
        margin-right: 0;
    }

    .chat-input > * + * {
        margin-left: 12px;
    }

    .proposal-actions > * {
        margin-right: 6px;
        margin-bottom: 6px;
    }

    .language-switcher > * + * {
        margin-top: 0.5rem;
    }

    .footer-social > * + * {
        margin-left: 1rem;
    }

    .notifications-container .notification > * + * {
        margin-left: 12px;
    }
}

/* Old Safari can support grid gap while still missing flex gap. */
@supports (-webkit-touch-callout: none) and (not (aspect-ratio: 1 / 1)) {
    .btn > i,
    .btn > .bi,
    .btn > .fa,
    .btn > .fas {
        margin-right: 0.375rem;
    }

    .btn > i:last-child,
    .btn > .bi:last-child,
    .btn > .fa:last-child,
    .btn > .fas:last-child {
        margin-right: 0;
    }

    .chat-input > * + * {
        margin-left: 12px;
    }

    .proposal-actions > * {
        margin-right: 6px;
        margin-bottom: 6px;
    }

    .language-switcher > * + * {
        margin-top: 0.5rem;
    }

    .footer-social > * + * {
        margin-left: 1rem;
    }

    .notifications-container .notification > * + * {
        margin-left: 12px;
    }
}

/* IE 10/11 only: graceful layout fallbacks, not pixel parity. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .btn {
        min-height: 44px;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .chat-container {
        background: #ffffff;
        box-shadow: 0 32px 80px rgba(44, 74, 124, 0.3);
    }

    .chat-header,
    .chat-input {
        background: #ffffff;
    }

    .chat-input {
        position: static;
    }

    .chat-input__field {
        background: #e8eef5;
        color: #1a1a2e;
    }

    .chat-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    .navbar-logo,
    .login-logo {
        object-fit: initial;
        max-width: 100%;
        height: auto;
    }

    #viewPhotoModal .modal-dialog {
        width: 90vw;
        max-width: 1200px;
        height: 88vh;
        max-height: 860px;
    }

    #viewPhotoModal #fullscreenPhoto {
        position: static;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: initial;
    }

    .spare-parts-cart-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .spare-parts-cart-item-main {
        display: block;
        flex: 1 1 100%;
    }

    .spare-parts-cart-item > * {
        margin-right: 1rem;
        margin-bottom: 0.75rem;
    }
}