/**
 * Bootstrap 3 → 5 Compatibility Layer
 * Maps deprecated BS3 classes to their BS5 equivalents.
 * Loaded after bootstrap.min.css and before theme.css.
 */

/* BS3 base typography defaults (BS5 uses 16px/1.5, BS3 used 14px/1.428) */
body {
    font-size: 14px;
    line-height: 1.42857143;
}

/* form-group: removed in BS5, restore BS3 spacing */
.form-group {
    margin-bottom: 15px;
}

/* form-horizontal: removed in BS5, keep as no-op */
.form-horizontal { }

/* form-inline: map to flex layout */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.5rem;
}

/* panel → card mapping (for any remaining panel references) */
.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}
.panel-default { }
.panel-heading {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.panel-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}
.panel-footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.panel-title {
    margin-bottom: 0;
    font-size: inherit;
}
.panel-group .panel + .panel {
    margin-top: 5px;
}
.panel-collapse { }

/* close button compat: BS3 .close → keep custom styling working */
.close {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.5;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.close:hover {
    opacity: 0.75;
}

/* well → removed in BS5 */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

/* label → badge mapping */
.label {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
}

/* img-responsive → img-fluid */
.img-responsive {
    max-width: 100%;
    height: auto;
}

/* input-group-addon: removed in BS5 */
.input-group-addon {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

/* pull-left / pull-right → float utilities */
.pull-left { float: left !important; }
.pull-right { float: right !important; }

/* text alignment compat (these exist in BS5 but just in case) */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

/* hidden/visible responsive classes → display utilities */
.hidden-xs { display: none !important; }
@media (min-width: 576px) {
    .hidden-xs { display: block !important; }
    .hidden-sm { display: none !important; }
}
@media (min-width: 768px) {
    .hidden-sm { display: block !important; }
    .hidden-md { display: none !important; }
}
@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }
}
@media (min-width: 992px) {
    .hidden-md { display: block !important; }
    .hidden-lg { display: none !important; }
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1170px;
    }
    .hidden-lg { display: block !important; }
}

.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 575.98px) {
    .visible-xs { display: block !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .visible-sm { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .visible-md { display: block !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .visible-lg { display: block !important; }
}

/* Fix float-based layouts inside rowList that conflict with BS5 flexbox .row */
.ok-subPageContent .ok-spc-RightList.rowList .ok-spcrl-carListBox .ok-cbmsfmcib-hoverBox .row {
    display: block;
}

/* page-header: removed in BS5 */
.page-header {
    padding-bottom: 0.5rem;
    margin: 2.5rem 0 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

/*
 * BS5 .row is display:flex whereas BS3 .row was display:block.
 * BS5 also adds .row > * { padding-left/right } to ALL row children.
 * The main layout uses container-fluid > .row as a page wrapper with
 * non-column children (header, RenderBody divs, footer).
 * Force these children to span full width, and remove padding only
 * from header so it sits flush edge-to-edge.
 */
body > .container-fluid > .row > * {
    flex: 0 0 100%;
    max-width: 100%;
}
body > .container-fluid > .row > header {
    padding-left: 0;
    padding-right: 0;
}
/* Banner (ok-slider) satırı tam kaplasın, yan boşluk kalmasın */
body > .container-fluid > .row > .ok-slider {
    padding-left: 0;
    padding-right: 0;
}

/* Sorter satırı (Ταξινόμηση, dropdown, Ειδοποιήστε με): width 100% kalksın, elemanlar dikey ortalansın */
.ok-selectFilter .ok-sf-content > .row > .col-md-7 > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.ok-selectFilter .ok-sf-content > .row > .col-md-7 > .row > * {
    width: auto !important;
    max-width: none !important;
}

/*
 * BS3 col-* used float:left so columns worked even outside a .row parent.
 * BS5 col-* is flex-based and needs a flex parent.
 * Make form elements that directly contain col-* children act as flex containers.
 */
.ok-hb-form form {
    display: flex;
    flex-wrap: wrap;
}
.ok-hb-form form > .row,
.ok-hb-form form > .clearfix {
    flex: 0 0 100%;
    width: 100%;
}

/* BS3 grid gutter: 15px each side so dropdowns have space between them (same as original app) */
.ok-hb-form form > .form-group {
    padding-left: 15px;
    padding-right: 15px;
}

/* Restore dropdown arrow + canlı değerleri: 14px, #555555 */
.ok-hb-form select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    font-size: 14px;
    color: #555555;
}
.ok-hb-form select.form-control option {
    font-size: 14px;
    color: #555555;
}

/* Sayfa dropdown'ları: sağdaki chevron ikonu görünsün, dikey ortalı dursun (filtre + sorter) */
.ok-selectFilter select.form-control,
.ok-subPageContent .ok-spc-leftFilter select.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 14px 10px !important;
    padding-right: 28px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
.ok-selectFilter select.form-control {
    height: 30px !important;
}
.ok-subPageContent .ok-spc-leftFilter select.form-control {
    height: 32px !important;
}

/*
 * theme.css gives .ok-h-bottom a fixed height: 320px. When the filter form
 * stacks vertically (before flex fix) or on small viewports, content overflows
 * and the "See Cars" button + car count get clipped. Allow this block to grow
 * so all filter dropdowns and the button remain visible.
 */
.ok-h-bottom:has(.ok-hb-form):not(.search-area) {
    height: auto;
    /* min-height: 320px; */
}

/* Araçlar alanı: container 1240px sınırında kalsın (override eden stilleri ez) */
.ok-contentBox {
    max-width: 1240px !important;
}
.ok-contentBox > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Sayfalama (pagination) ortada olsun */
#pagingColumb,
.paginationBox {
    text-align: center !important;
}
.paginationBox .pagination {
    justify-content: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Araç listesi + üyelik + favoriler + test drive + reservations: sol 25%, sağ 75% – yan yana */
@media (min-width: 768px) {
    .ok-subPageContent > .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .ok-subPageContent > .row > .col-md-3:first-child,
    .ok-subPageContent > .row > #vehicleFilter.col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        min-width: 0 !important;
    }
    .ok-subPageContent > .row > .col-md-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        min-width: 0 !important;
    }
}