/*
  Bootstrap 5 adjustments for existing EnerjisaTema styles.
  Goal: keep the Bootstrap 4 visual design unchanged.
*/

/* Bootstrap 5 reintroduces underlined links by default; BS4 didn't.
   Keep existing theme behavior (no underline unless a component requests it). */
a {
    text-decoration: none;
}

/* The UI uses custom close buttons (image) with a BS4-style class name. */
button.close {
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 1;
}

/* In Bootstrap 5, `.modal-header` is flex and places the dismiss button on the far right.
   Some legacy theme rules/components use a custom `.close` button (image) which can end up
   sitting next to the title. Ensure the close button is always aligned to the far right
   without requiring per-page `ms-auto` tweaks. */
.modal-header {
  display: flex;
  align-items: center;
}

.modal-header .close {
  margin-left: auto;
}

/* Match BS4 container paddings and max-width on very large screens.
   BS5 uses smaller default side paddings and adds an XXL container width. */
.container {
  padding-left: 15px;
  padding-right: 15px;
}

/* NOTE: Do not override `.container` max-width here.
   `online_islemler.css` already defines large-screen container widths via media queries
   (e.g. 1200/1400/1600). Overriding it here would make Login5 narrower than Login4. */

/* Match BS4 grid gutter sizing (30px total gutter: 15px per side). */
.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
}

/* Arama (Autocomplete): in BS5, dropdown positioning is stricter.
   The legacy rule in `online_islemler.css` sets `width: calc(100% - 30px)` for `.dropdown-menu`,
   which becomes too narrow once the container is properly positioned.
   Keep BS4 look: dropdown should match the input width. */
.search-input--autocompleteArama.position-relative > .dropdown-menu {
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
}

/* BS4 used `.form-group` for spacing; BS5 removed it.
   Our markup still has inline `height:40px` on these wrappers while theme inputs are 46px tall.
   Make wrapper height match input height to avoid helper text overlapping the input. */
.login-page .form-group.floating.text-input-full {
  height: 46px !important;
}

/* The lock badge is absolutely positioned; make sure it anchors to the card.
   Bootstrap 5 changes surrounding positioning behavior enough to reveal this. */
.login-page .online_islemler .item {
  position: relative;
}

/* Ensure links used as modal-dismiss buttons keep pointer behavior */
[data-bs-dismiss="modal"].button--default {
    cursor: pointer;
}

/* bootstrap-select (v1.13.x) + Enerjisa theme sets `.bootstrap-select.show .dropdown-menu { z-index: -1; }`
   which causes the menu to render behind content under Bootstrap 5.
   Keep the existing look but restore a sane stacking order for v5 pages only. */
.bootstrap-select.show {
  z-index: var(--bs-dropdown-zindex);
}

.bootstrap-select.show .dropdown-menu {
  z-index: var(--bs-dropdown-zindex);
}

/* BS5 shows dropdowns via `.dropdown-menu.show { display:block; }`.
   bootstrap-select (v1.13.x) typically toggles `.show` on the wrapper instead,
   and may use inner elements with `dropdown-menu inner` classes that never get `.show`.
   Ensure the menu and its inner container are visible when open. */
.bootstrap-select.show > .dropdown-menu {
  display: block;
}

.bootstrap-select.show .dropdown-menu {
  display: block;
}

.bootstrap-select.show .dropdown-menu > .inner {
  display: block;
}

.bootstrap-select.show .dropdown-menu.inner {
  display: block;
}

/* Textarea char info placement (BS5) - generic for all form-row-textarea */
.form-row-textarea {
  position: relative;
  display: block;
}

.form-row-textarea .input-textarea {
  padding-bottom: 1.75rem;
}

.form-row-textarea .max_char_info {
  position: absolute;
  right: 12px;
  bottom: 8px;
  margin: 0;
  pointer-events: none;
  z-index: 2;
  display: block;
  text-align: right;
}

.form-row-textarea > .text-danger {
  display: block;
  margin-top: .5rem;
}

/* Kaçak Tutanağı Bedel Hesaplama (mobile):
   prevent Tesisat No info icon from staying above opened select dropdowns. */
@media (max-width: 600px) {
  #kacakTutanagiBilgisiSorgulaForm .text-input-full .warning.tesisat-no-nedir-img {
    z-index: 1;
  }

  #kacakTutanagiBilgisiSorgulaForm .bootstrap-select.show {
    z-index: 1101;
  }
}

/* Enerjisa dropdown-black header menus rely on a small negative overlap between the
   black header block and the opened menu. In Bootstrap 5, Popper adds `data-bs-popper`
   and may introduce a visible gap. Keep BS4 look by applying the same overlap. */
.dropdown-black--tesisat .dropdown-menu[data-bs-popper],
.dropdown-black--user .dropdown-menu[data-bs-popper],
.dropdown-black--notification .dropdown-menu[data-bs-popper] {
  margin-top: -7px;
}

/* Cookie consent footer: keep above all UI (including mobile menu) */
.footer_cerezpolitikasi {
  z-index: 40000 !important;
}

/* Login KVKK tooltip: desktop uses hover (legacy theme).
   On mobile there is no hover, so show it on tap/focus-within instead of hiding. */
.input-checkbox[data-title]::after {
  pointer-events: none;
  max-width: min(520px, calc(100vw - 32px));
  white-space: normal;
}

@media (max-width: 991.98px) {
  .input-checkbox[data-title]::after {
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 1000;
  }

  .input-checkbox[data-title]:active::after,
  .input-checkbox[data-title]:focus-within::after {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }
}

/* BS5 removed `position: relative` from col-* classes (BS4 had it on every column).
   Restore it globally so absolutely-positioned children stack properly. */
.row > [class*="col-"] {
  position: relative;
}

/* Ensure reCAPTCHA sits above sibling elements in the same column.
   A modest z-index is enough — columns now have `position: relative` (see above)
   so sibling stacking contexts are isolated. Keep below loading-bg (99999).
   Use [data-sitekey] to cover ALL captcha containers regardless of class name. */
.g-recaptcha-box,
[data-sitekey] {
  position: relative;
  z-index: 2;
}

/* Başvuru anket modalı: BS5'te son adımda captcha (304px) + gönder butonu
   aynı satırda taşabiliyor. Özellikle Android'de modal içeriği sağa sola kayıyor.
   Satırı kırılabilir yapıp mobilde alt alta dizerek içeriği modal içinde tut. */
#modal-basvuru-memnuniyet-anketi .item.fourth .col-lg-12[style*="justify-content: center"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

#modal-basvuru-memnuniyet-anketi #captcha_basvuru_memnuniyetAnketForm {
  max-width: 100%;
}

#modal-basvuru-memnuniyet-anketi .send_survey {
  flex: 0 0 auto;
}

/* Mobile navigation: ensure menu button, logo (with text below), and search are properly aligned.
   Bootstrap 5 changes float behavior; use flexbox only on mobile to keep elements aligned. */
@media (max-width: 767px) {
  #modal-basvuru-memnuniyet-anketi .item.fourth .col-lg-12[style*="justify-content: center"] {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #modal-basvuru-memnuniyet-anketi #captcha_basvuru_memnuniyetAnketForm {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
  }

  #modal-basvuru-memnuniyet-anketi #captcha_basvuru_memnuniyetAnketForm > div {
    margin: 0 auto;
  }

  #modal-basvuru-memnuniyet-anketi .send_survey {
    width: 100%;
    text-align: center;
  }

  .header nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  
  /* Override float behavior on mobile - floats don't work well with flexbox */
  .header nav .float-left {
    float: none !important;
  }

  /* Fallback without `:has()` support: treat the non-menu `.float-left` as the brand container */
  .header nav > .float-left:not(.hp_menu-mobile) {
    flex: 1 1 auto;
    order: 2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
  }
  
  /* Menu button container - stays on the left */
  .header nav .hp_menu-mobile {
    flex: 0 0 auto;
    order: 1;
  }
  
  /* Logo container - logo and text stacked vertically, positioned in the middle */
  .header nav > .float-left:has(.navbar-brand) {
    flex: 1 1 auto;
    order: 2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
  }
  
  /* Keep `.navbar-brand` styling controlled by the legacy theme CSS to match Login */

  /* Search and other mobile-right elements - stays on the right */
  .header nav .mobile-right {
    flex: 0 0 auto;
    order: 3;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }

  /* Mobile: keep search + profile group from drifting left due to desktop theme spacing */
  .header nav .mobile-right .search-input {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header nav .mobile-right .dropdown-black--user {
    margin-left: 0 !important;
  }

  /* Keep profile + notification aligned on one row */
  .header nav .mobile-right .float-right {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .header nav .mobile-right .dropdown-black {
    margin-top: 0 !important;
  }

  /* Mobile: keep profile/notification buttons vertically aligned with hamburger/search */
  .header nav .mobile-right .dropdown-black > button {
    display: flex;
    align-items: center;
    line-height: 1;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 46px;
  }

  .header nav .mobile-right .dropdown-black > button img {
    display: block;
  }

  /* Mobile: prevent double icons inside profile/notification dropdown buttons.
     Layout renders both icons; theme CSS toggles them via `.dropdown.show`.
     On some mobile/BS5 states both can become visible—force a single icon. */
  .header nav .mobile-right .dropdown-black--user button img.hover-show,
  .header nav .mobile-right .dropdown-black--notification button img.hover-show {
    display: none !important;
  }

  .header nav .mobile-right .dropdown-black--user button img.hover-hide,
  .header nav .mobile-right .dropdown-black--notification button img.hover-hide {
    display: block !important;
  }

  .header nav .mobile-right .dropdown-black--user.show button img.hover-show,
  .header nav .mobile-right .dropdown-black--notification.show button img.hover-show,
  .header nav .mobile-right .dropdown-black--user button[aria-expanded="true"] img.hover-show,
  .header nav .mobile-right .dropdown-black--notification button[aria-expanded="true"] img.hover-show {
    display: block !important;
  }

  .header nav .mobile-right .dropdown-black--user.show button img.hover-hide,
  .header nav .mobile-right .dropdown-black--notification.show button img.hover-hide,
  .header nav .mobile-right .dropdown-black--user button[aria-expanded="true"] img.hover-hide,
  .header nav .mobile-right .dropdown-black--notification button[aria-expanded="true"] img.hover-hide {
    display: none !important;
  }

  /* Mobile search input: stays in flex flow */
  .header nav .search-input-focus {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    flex: 0 0 auto;
    transition: flex 0.3s ease;
    position: relative;
    overflow: visible;
  }

  /* Mobile search: when expanded (active), grow to fill space */
  .header nav .search-input-focus.active {
    flex: 1 1 auto !important;
  }
  
  /* Mobile search dropdown: match input width exactly and position properly */
  .header nav .search-input--autocomplete .dropdown-menu.show,
  .header nav .search-input-focus .dropdown-menu.show {
    margin-top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 0 0 8px 8px !important;
    border-top: none !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure dropdown matches autocomplete input container */
  .header nav .search-input--autocomplete {
    overflow: visible !important;
  }
    /* Mobile: tiny right nudge for search + profile (keep notification as-is) */
    .header nav .mobile-right .search-input-focus {
      left: 2px;
    }

    .header nav .mobile-right .dropdown-black--user {
      position: relative;
      left: 2px;
    }

  /* When the dropdown is open (even before results), remove input bottom radius */
  .header nav .search-input--autocomplete:has(.dropdown-menu.show) .searchInput {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  /* When the dropdown is open, make the magnifier icon orange (same behavior as legacy `.show:before`) */
  .header nav .search-input--autocomplete:has(.dropdown-menu.show):before,
  .header nav .search-input--autocompleteArama:has(.dropdown-menu.show):before {
    background: url(../img/search-input-icon-yellow-20.svg) no-repeat !important;
    background-position: center !important;
    z-index: 104;
  }

  /* Ensure dropdown matches the input width on mobile (respecting container padding) */
  .header nav .search-input--autocomplete:has(.dropdown-menu.show) .dropdown-menu.show {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }

  /* Show `Temizle` when the dropdown is open (CSS-only) */
  .header nav .search-input--autocomplete:has(.dropdown-menu.show) .button-box .clear,
  .header nav .search-input--autocomplete:has(.dropdown-menu.show) .button-box .close,
  .header nav .search-input--autocompleteArama:has(.dropdown-menu.show) .button-box .clear,
  .header nav .search-input--autocompleteArama:has(.dropdown-menu.show) .button-box .close {
    display: block !important;
  }

  /* Anasayfa (mobile): accordion header alignment (title centered, orange arrow on the right) */
  .accordion-online_islemler .card-header button {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
  }

  .accordion-online_islemler .card-header button .title {
    margin: 0;
    padding-left: 10px;
  }

  /* Legacy theme uses `:before` + float. In BS5 this can misalign; re-render arrow as `:after`. */
  .accordion-online_islemler .card-header button:before {
    content: none !important;
  }

  .accordion-online_islemler .card-header button:after {
    background: url(../img/arrow-yellow-thin.svg) no-repeat;
    transition: .2s;
    content: '';
    width: 11px;
    height: 20px;
    margin-left: auto;
    transform: rotate(90deg);
  }

  .accordion-online_islemler .card-header button[aria-expanded="true"]:after {
    transform: rotate(-90deg);
    transition: .2s;
  }

  /* Mobile hamburger menu (BS5): make dropdown cover full screen like BS4 */
  .header nav .hp_menu-mobile > .dropdown-menu,
  .header nav .hp_menu-mobile > .dropdown-menu.show,
  .header nav .hp_menu-mobile > .dropdown-menu[data-bs-popper] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    inset: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #0a191f !important;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 30000;
  }

  /* Legacy theme uses `.hp_menu-mobile.show` + `:before` as the dark panel/overlay.
     On mobile browsers, `height:100%` can leave a gap; use viewport units. */
  .header nav .hp_menu-mobile.show {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    bottom: 0 !important;
    z-index: 30000 !important;
  }

  .header nav .hp_menu-mobile.show:before {
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    z-index: 29999 !important;
  }

  

  .header nav .hp_menu-mobile .btn-menu-open {
    position: relative;
    top: -2px;
  }

  .header nav .navbar-brand img[src*="baskent-logo-black"] {
    margin-top: 10px !important;
  }

  .header nav .navbar-brand img[src*="baskent-logo-black"] + span {
    margin-top: -1px !important;
  }
}

/* Profilim (mobile): long email/phone values should wrap inside the card.
   In BS5, the right-floating "Düzenle" links can force overflow on narrow widths. */
@media (max-width: 767px) {
  #currentEmail,
  #currentTelNo {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #EmailGuncelle,
  #TelGuncelle {
    float: none !important;
    display: inline-block;
    margin-left: 0 !important;
    margin-top: 6px;
  }
}

/* Online Ödeme (mobile): keep accordion arrow inside header bounds.
   Legacy CSS uses negative right margin on the arrow; with BS5 this can shift too far right. */
@media (max-width: 767px) {
  .accordion-odenecek-toplam-tutar .card .card-header button {
    padding-right: 8px;
  }

  .accordion-odenecek-toplam-tutar .card .card-header button:before {
    margin-right: 0 !important;
  }
}

/* Mobile header logo subtitle spacing:
   keep "Online İşlemler" slightly lower under the logo text (Ayedaş/Başkent/Toroslar). */
@media (max-width: 767px) {
  .header nav .navbar-brand img[src*="-logo-black"] + span {
    margin-top: 2px !important;
  }
}

/* Mobile header (logged-in): keep search/profile/notification closer and on same baseline. */
@media (max-width: 767px) {
  .header nav .mobile-right {
    gap: 0;
  }

  .header nav .mobile-right .float-right {
    gap: 0;
  }

  /* Cancel earlier tiny horizontal nudges that can create uneven spacing on some brands. */
  .header nav .mobile-right .search-input-focus {
    left: -2px !important;
  }

  .header nav .mobile-right .dropdown-black--user {
    left: 0 !important;
  }

  /* Sessionless (not logged-in): keep space between search and `Giriş Yap` button */
  .header nav .mobile-right .button-online-islemler-xs {
    margin-left: 8px;
  }

  .header nav .mobile-right .search-input {
    margin-right: 0 !important;
  }

  .header nav .mobile-right .search-input:after {
    right: -10px;
    top: 3px;
  }

  .header nav .mobile-right .dropdown-black--user > button,
  .header nav .mobile-right .dropdown-black--notification > button,
  .header nav .mobile-right .dropdown-black--user.show > button,
  .header nav .mobile-right .dropdown-black--notification.show > button {
    margin-top: 0 !important;
    min-height: 40px;
    padding-left: 12px;
    padding-right: 12px;
  }
}