/* =========================================================
   HabboTrade frontend - UX smoothness improvements
   ========================================================= */

/* Smoother furni detail popup (scale-in) */
.popUpContainer .popUpBox {
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.popUpContainer.open .popUpBox {
  transform: scale(1);
  opacity: 1;
}

/* No flicker: content stays hidden until loaded */
.popUpFurni .popUpContent {
  opacity: 1;
  transition: opacity 0.25s ease;
}
.popUpFurni.is-loading .popUpContent {
  opacity: 0;
}

/* Smoother overlay fade */
.popUpContainer {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Smoother furni box hover */
.getFurniList .furniBox {
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.getFurniList .furniBox:hover {
  transform: translateY(-2px);
}

/* Faster news slider control (if any) */
.tns-outer .tns-controls button {
  transition: opacity 0.2s ease;
}

#searchBar .selectCat {
  border: 0;
  color: #d7dce6;
}

/* HabboUtils-inspired palette, with the existing HabboTrade imagery retained. */
:root {
  --ht-primary: #6f91bb;
  --ht-secondary: #7aa2d2;
  --ht-accent: #5b98ff;
  --ht-background: #00081a;
  --ht-panel: #10172a;
  --ht-item: #20263a;
  --ht-text: #d7dce6;
  --ht-muted: #aebbd0;
  --ht-border: #404458;
  --ht-line: rgba(111,145,187,.22);
  --ht-hover: #88b2e6;
  --ht-success: #4caf50;
  --ht-error: #d63031;
}

html, body.versionFive { background: var(--ht-background); color: var(--ht-text); }
body.versionFive { background-image: radial-gradient(ellipse 70% 34% at 50% 0, #12203d 0, transparent 100%); }
::selection { background: var(--ht-accent); color: #071125; }
:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: 3px; }
html { scrollbar-color: #354765 var(--ht-background); }
input, select { caret-color: var(--ht-accent); }

.habboIcon { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; flex: none; vertical-align: -3px; }
#navigation { background: rgba(16, 23, 42, .98); border-bottom: 1px solid rgba(111,145,187,.22); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
#navigation nav ul.navi > li > a, #navigation nav ul.navi > li > span { color: var(--ht-muted); }
#navigation nav ul.navi > li.active > a, #navigation nav ul.navi > li:hover > a { color: #fff; }
#navigation nav ul.navi > li > a { display: inline-flex; align-items: center; gap: 6px; }
#navigation .naviRight .login { display: inline-flex; align-items: center; gap: 6px; background: #385f91; border-color: #587fb0; color: #fff; }
#navigation .naviRight .login:hover { background: #4776ae; }
#navigation .navi sup { color: #bed8ff; font-size: 10px; }

#header { background-color: #0d1426; }
#header:before { background: linear-gradient(180deg, rgba(0,8,26,.72), rgba(0,8,26,.91)); }
#header .claimContainer .claim { color: #f4f7fd; letter-spacing: 1px; }
#header .claimContainer .claim span { color: #c5d8f2; letter-spacing: 2px; }
main#content { background: transparent; }
main#content .box { background: var(--ht-panel); border-radius: 12px; }

main#content .newsContainer .newsBox { overflow: hidden; min-height: 145px; border: 1px solid rgba(111,145,187,.24); border-radius: 12px; box-shadow: 0 9px 22px rgba(0,0,0,.17); }
main#content .newsContainer .newsBox:before { background: linear-gradient(100deg, rgba(10,17,34,.94) 17%, rgba(10,17,34,.60) 75%, rgba(10,17,34,.32)); }
main#content .newsContainer .newsBox .newsContent { border: 0; padding: 18px; }
main#content .newsContainer .newsBox .newsHeadline { color: #f7f9ff; font-weight: 600; }
main#content .newsContainer .newsBox .shortNews, main#content .newsContainer .newsBox .newsInfos { color: #d0dcf0; }
main#content .newsContainer .newsBox:hover { border-color: rgba(124,180,247,.56); }

#searchBar { display: flex; align-items: stretch; overflow: hidden; border: 1px solid rgba(111,145,187,.27); border-radius: 12px; background: var(--ht-panel); box-shadow: 0 8px 22px rgba(0,0,0,.14); }
#searchBar .selectCat { display: grid; place-items: center; flex: 0 0 54px; padding: 0; background: var(--ht-item); border-right: 1px solid rgba(111,145,187,.2); }
#searchBar .searchIcon { display: grid; place-items: center; flex: 0 0 54px; background: var(--ht-item); border-right: 1px solid rgba(111,145,187,.2); }
#searchBar .searchIcon .habboIcon { width: 16px; height: 16px; filter: brightness(0) invert(1); }
#searchBar .selectCat[aria-controls="furniFilters"] { border-right: 0; border-left: 1px solid rgba(111,145,187,.2); }
#searchBar .selectCat:hover, #searchBar .selectCat[aria-expanded="true"] { background: #304767; }
#searchBar .selectCat .habboIcon { width: 17px; height: 16px; }
#searchBar .searchFurni { flex: 1; min-width: 0; background: transparent; padding: 15px 18px; color: #f4f7ff; font-size: 15px; }
#searchBar .searchFurni::placeholder { color: #aebbd0; opacity: 1; }
#searchBar .foundedInfo { min-width: 104px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 15px; background: transparent; border-left: 1px solid rgba(111,145,187,.2); color: var(--ht-muted); font-size: 12px; white-space: nowrap; cursor: default; }
#searchBar .foundedInfo span { color: #f2f7ff; font-size: 14px; font-variant-numeric: tabular-nums; }

.getFurniList .furniBox { background: var(--ht-panel); border: 1px solid rgba(111,145,187,.22); border-radius: 12px; overflow: hidden; color: var(--ht-text); box-shadow: 0 7px 18px rgba(0,0,0,.12); }
.getFurniList .furniBox:hover { opacity: 1; border-color: rgba(124,180,247,.6); transform: translateY(-3px); }
.getFurniList .furniBox .furniHeadInner.bg, .getFurniList .furniBox .furniBoxFooter { background: #182137; }
.getFurniList .furniBox .furniBoxFooter { color: #e3eaf7; min-height: 45px; display: grid; place-items: center; }
.getFurniList .furniBox .furniImg { background-color: #111a2f; background-blend-mode: soft-light; }
#pagination .paginationjs-page a, #pagination .paginationjs-prev a, #pagination .paginationjs-next a { background: var(--ht-item); color: var(--ht-text); border-color: var(--ht-border); }
#footer .footerInfo { background: var(--ht-panel); color: var(--ht-muted); border-top: 1px solid rgba(111,145,187,.2); }

body.filtersOpen { overflow: hidden; }
.furniFilters { position: fixed; inset: 0; z-index: 2000; display: block; color: var(--ht-text); }
.furniFilters[hidden], .furniFilters .clothingTypeFilter[hidden] { display: none !important; }
.filterBackdrop { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: rgba(3,8,18,.76); backdrop-filter: blur(4px); cursor: default; }
.filterDrawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px,100%); display: flex; flex-direction: column; background: #0d1627; border-left: 1px solid rgba(111,145,187,.25); box-shadow: -16px 0 36px rgba(0,0,0,.30); animation: filterEnter .22s cubic-bezier(.22,1,.36,1) both; }
@keyframes filterEnter { from { transform: translateX(24px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
.filterHeader { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid rgba(111,145,187,.17); }
.filterHeader h2 { margin: 0 0 3px; color: #f2f6ff; font-size: 17px; font-weight: 600; }
.filterHeader p { margin: 0; color: var(--ht-muted); font-size: 11px; }
.filterClose { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(111,145,187,.18); border-radius: 10px; background: var(--ht-item); }
.filterClose:hover { background: #2b3955; }
.filterBody { flex: 1; overflow-y: auto; padding: 22px 20px; }
.filterSection + .filterSection { margin-top: 32px; }
.filterSection h3 { margin: 0 0 11px; color: var(--ht-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.furniFilterTypes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.furniFilterTypes button[data-type=""] { grid-column: 1 / -1; }
.furniFilterTypes button { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 8px; border: 1px solid rgba(111,145,187,.18); border-radius: 9px; background: var(--ht-item); color: var(--ht-text); font-size: 12px; cursor: pointer; }
.furniFilterTypes button:hover { background: #293750; }
.furniFilterTypes button[aria-pressed="true"] { background: rgba(47,91,142,.28); border-color: rgba(124,180,247,.57); color: #fff; }
.furniFilterTypes img { width: 23px; height: 23px; object-fit: contain; image-rendering: pixelated; }

.popUpFurni .furniInfoList { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; margin: 0; padding: 0; }
.popUpFurni .furniInfoField { min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--ht-line); }
.popUpFurni .furniInfoFieldWide { grid-column: 1 / -1; }
.popUpFurni .furniInfoField dt { margin: 0 0 3px; color: var(--ht-muted); font-size: 11px; font-weight: 400; line-height: 1.4; }
.popUpFurni .furniInfoField dd { margin: 0; color: #edf3fc; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.popUpFurni .furniInfoCurrencies { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.popUpFurni .furniInfoCurrency { display: inline-flex; align-items: center; gap: 4px; }
.popUpFurni .furniInfoCurrency img { max-width: 20px; max-height: 20px; object-fit: contain; image-rendering: pixelated; }
@media (max-width: 575px) {
  .popUpFurni .furniInfoList { grid-template-columns: minmax(0,1fr); }
  .popUpFurni .furniInfoField { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); gap: 12px; }
  .popUpFurni .furniInfoField dt { margin: 0; }
}
.filterSelects label { display: grid; gap: 8px; margin-bottom: 16px; color: #c9d7eb; font-size: 12px; }
.filterSelects select { width: 100%; min-width: 0; height: 48px; padding: 0 13px; border: 1px solid rgba(111,145,187,.24); border-radius: 8px; background: var(--ht-item); color: #f2f6ff; font-size: 13px; }
.filterSelects select:hover { border-color: rgba(124,180,247,.55); }
.filterFooter { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 14px 20px; border-top: 1px solid rgba(111,145,187,.17); }
.filterFooter button { min-height: 46px; border-radius: 9px; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.filterReset { border: 1px solid rgba(111,145,187,.16); background: #171e31; }
.filterReset:hover { background: #293750; }
.filterApply { border: 1px solid #618ac3; background: #406da8; }
.filterApply:hover { background: #527fba; }

@media (max-width: 767px) {
  #navigation nav ul.navi > li > a { display: flex; }
  #searchBar .selectCat, #searchBar .searchIcon { flex-basis: 48px; }
  #searchBar .searchFurni { padding: 13px 11px; font-size: 13px; }
  #searchBar .foundedInfo { min-width: 57px; padding: 0 7px; font-size: 0; }
  #searchBar .foundedInfo span { font-size: 13px; }
  .filterDrawer { top: auto; left: 0; width: 100%; height: min(88dvh,760px); border-left: 0; border-top: 1px solid rgba(111,145,187,.25); border-radius: 17px 17px 0 0; animation-name: filterEnterMobile; }
  @keyframes filterEnterMobile { from { transform: translateY(30px); opacity: .7; } to { transform: translateY(0); opacity: 1; } }
  .filterFooter { padding-bottom: max(14px,env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .filterDrawer, .getFurniList .furniBox { animation: none; transition: none; } }

/* Shared public-site surfaces */
body.versionFive { font-family: "Fira Sans", sans-serif; font-size: 16px; line-height: 1.55; font-weight: 400; }
body.versionFive main#content { color: var(--ht-text); }
body.versionFive main#content h1 { color: #f1f6ff; font-size: clamp(29px,3vw,39px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
body.versionFive main#content h2 { color: #ebf2ff; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
body.versionFive main#content h3 { color: #e5efff; font-weight: 600; line-height: 1.25; }
body.versionFive main#content a:not(.newsBox):not(.furniBox):not(.btn):not(.nav-link) { color: #b9d5fa; text-underline-offset: 3px; }
body.versionFive main#content a:not(.newsBox):not(.furniBox):not(.btn):not(.nav-link):hover { color: #e2efff; }
body.versionFive .text-muted, body.versionFive .text-white-50 { color: var(--ht-muted) !important; }
body.versionFive .highlight { color: #a9ccfb; }
body.versionFive .headlineHr:before, body.versionFive .teamTitle:before { background: var(--ht-line); }
body.versionFive main#content .box, body.versionFive main#content dl.styled { background: var(--ht-panel); border-radius: 12px; color: var(--ht-text); }
body.versionFive .loading:after { background: rgba(13,22,39,.75); }

/* Header and navigation */
body.versionFive #navigation { background: #10172a; }
body.versionFive #navigation nav ul.navi.naviLeft { padding-top: 16px; padding-bottom: 16px; }
body.versionFive #navigation nav ul.navi > li > a, body.versionFive #navigation nav ul.navi > li > span { font-size: 14px; font-weight: 500; letter-spacing: 0; }
body.versionFive #navigation nav ul.navi > li.login { background: #406da8; border: 1px solid #5e86bc; color: #fff; border-radius: 8px; padding: 8px 13px; }
body.versionFive #navigation nav ul.navi > li.login:hover { background: #5480b8; border-color: #8bb7ed; }
body.versionFive #navigation .rightSub { background: #151d31; border: 1px solid var(--ht-line); border-radius: 0 0 10px 10px; box-shadow: 0 14px 25px rgba(0,0,0,.24); overflow: hidden; }
body.versionFive #navigation .rightSub a { display: flex; align-items: center; gap: 8px; color: var(--ht-text); padding: 9px 13px; }
body.versionFive #navigation .rightSub a:hover { background: #263651; color: #fff; }
body.versionFive #quickbar { background: #10172a; color: var(--ht-text); border-bottom: 1px solid var(--ht-line); }
body.versionFive #quickbar .login span { display: inline-flex; align-items: center; gap: 7px; color: #f2f6ff; font-size: 13px; font-weight: 600; text-transform: none; cursor: pointer; }
body.versionFive #quickbar .burgerMenu span, body.versionFive #quickbar .burgerMenu span:before, body.versionFive #quickbar .burgerMenu span:after { background: #d8e9ff; }
body.versionFive #header:before { background: linear-gradient(180deg, rgba(0,8,26,.67), rgba(0,8,26,.94)); }
body.versionFive #header .claimContainer .claim { font-weight: 500; }

/* Actions, forms and tab navigation */
body.versionFive .btn { border-radius: 8px; font-size: 14px; font-weight: 600; transition: background .18s ease, border-color .18s ease, color .18s ease; }
body.versionFive .btn:before { display: none; }
body.versionFive .btn.btn-primary, body.versionFive .btn.btn-success { background: #406da8; border-color: #638cc3; color: #fff; }
body.versionFive .btn.btn-primary:hover, body.versionFive .btn.btn-success:hover, body.versionFive .btn.btn-primary:focus, body.versionFive .btn.btn-success:focus { background: #5480b8; border-color: #90b8ed; color: #fff; box-shadow: none; }
body.versionFive .btn.btn-danger { background: #813a49; border-color: #a45a6a; color: #fff; }
body.versionFive .btn.btn-danger:hover { background: #a3495c; border-color: #c66a7f; }
body.versionFive .btn:disabled, body.versionFive button:disabled { opacity: .5; cursor: not-allowed; }
body.versionFive .nav.nav-tabs, body.versionFive .nav.nav-pills { gap: 7px; border-bottom: 1px solid var(--ht-line); margin-bottom: 16px; }
body.versionFive .nav.nav-pills { border-bottom: 0; }
body.versionFive .nav.nav-tabs .nav-link, body.versionFive .nav.nav-pills .nav-link { border: 1px solid transparent; border-radius: 8px 8px 0 0; background: transparent; color: var(--ht-muted); font-size: 14px; font-weight: 500; padding: 10px 15px; }
body.versionFive .nav.nav-pills .nav-link { border-radius: 8px; background: var(--ht-item); }
body.versionFive .nav.nav-tabs .nav-link:hover, body.versionFive .nav.nav-pills .nav-link:hover { background: #263651; border-color: var(--ht-line); color: #f1f6ff; }
body.versionFive .nav.nav-tabs .nav-link.active, body.versionFive .nav.nav-pills .nav-link.active { background: #263e60; border-color: #547fb3; color: #fff; }
body.versionFive form input:not([type="checkbox"]):not([type="radio"]), body.versionFive form select, body.versionFive form textarea, body.versionFive .form-control { background: var(--ht-item); border: 1px solid var(--ht-border); border-radius: 8px; color: #f1f6ff; min-height: 42px; }
body.versionFive form input::placeholder, body.versionFive form textarea::placeholder, body.versionFive .form-control::placeholder { color: #acbad0; opacity: 1; }
body.versionFive form input:focus, body.versionFive form select:focus, body.versionFive form textarea:focus, body.versionFive .form-control:focus { background: #27324b; border-color: #75a8e6; color: #fff; box-shadow: 0 0 0 2px rgba(91,152,255,.18); outline: none; }
body.versionFive .input-group-text, body.versionFive form .icon { background: #19253d; border-color: var(--ht-border); color: var(--ht-text); }
body.versionFive .form-check-input { background-color: var(--ht-item); border-color: #7186a9; }
body.versionFive .form-check-input:checked { background-color: #4c82c2; border-color: #8ab5e6; }
body.versionFive .formInfo { background: #1b2943; color: #e2ecfb; border-radius: 8px; }
body.versionFive .formInfo.danger { background: #543446; color: #fff; }
body.versionFive .form-btn { background: #406da8; border-color: #638cc3; color: #fff; border-radius: 8px; }
body.versionFive .form-btn:hover { background: #5480b8; color: #fff; }
body.versionFive #searchBar .searchFurni { background: transparent; border: 0; border-radius: 0; box-shadow: none; min-height: 0; }
body.versionFive #searchBar .selectCat:not(button) { cursor: default; }
body.versionFive #searchBar .selectCat:not(button):hover { background: var(--ht-item); }
body.versionFive #searchBar .selectCat:not(button) .habboIcon { filter: brightness(0) invert(1); }

/* Lists, tables and pagination */
body.versionFive ul.list-group .list-group-item, body.versionFive .list-group-item { background: var(--ht-panel); border-color: var(--ht-line); color: var(--ht-text); padding: 13px 16px; }
body.versionFive .list-group-item:first-child { border-radius: 10px 10px 0 0; }
body.versionFive .list-group-item:last-child { border-radius: 0 0 10px 10px; }
body.versionFive .list-group-item:only-child { border-radius: 10px; }
body.versionFive .lastNews .newsDate { color: var(--ht-muted); }
body.versionFive .lastNews .newsTitle { color: #e1ecfa; }
body.versionFive table:not(.table-borderless) { color: var(--ht-text); border-color: var(--ht-line); }
body.versionFive table th { color: #e9f2ff; background: #202b43; }
body.versionFive table td { border-color: var(--ht-line); }
body.versionFive .paginationjs { font-family: "Fira Sans", sans-serif; }
body.versionFive .paginationjs .paginationjs-pages li { border-color: var(--ht-line); }
body.versionFive .paginationjs .paginationjs-pages li > a { background: var(--ht-item); color: var(--ht-text); border: 0; }
body.versionFive .paginationjs .paginationjs-pages li > a:hover, body.versionFive .paginationjs .paginationjs-pages li.active > a { background: #406da8; color: #fff; }
body.versionFive .paginationjs .paginationjs-pages li.disabled > a { background: #1a2234; color: #98a8bf; }
body.versionFive .pagInfo { color: var(--ht-muted); font-size: 13px; letter-spacing: 0; }

/* Item cards, article content and comments */
body.versionFive .getFurniList .furniBox { border-color: var(--ht-line); }
body.versionFive .getFurniList .furniBox .furniBoxFooter { background: #192238; }
body.versionFive .getFurniList .furniBox.furniCommentBox .furniBoxFooter { display: flex; min-height: 45px; color: var(--ht-text); }
body.versionFive .getFurniList .furniHeader { background: #263550; border-radius: 10px 10px 0 0; color: #ecf4ff; }
body.versionFive .getFurniList .addNewFurni { background-color: var(--ht-panel); border: 1px solid var(--ht-line); border-radius: 12px; }
body.versionFive .getFurniList .addNewFurni span { background: #3a6398; }
body.versionFive .votingBox { background: #141d31; }
body.versionFive .votingBox .text-warning { color: #efc474 !important; }
body.versionFive .votingBox .text-danger { color: #ee8f9c !important; }
body.versionFive .votingBox .text-success { color: #94d69b !important; }
body.versionFive .newContentBox .newsImg { border: 1px solid var(--ht-line); border-radius: 12px; overflow: hidden; }
body.versionFive .newContentBox .newsImg:before { background: linear-gradient(95deg, rgba(7,16,32,.88), rgba(7,16,32,.28)); }
body.versionFive .newContentBox .newsImg .newsInfo { background: rgba(9,17,33,.88); }
body.versionFive .newContentBox .box { line-height: 1.7; }
body.versionFive .commentBox, body.versionFive .commentBox.lightBox { background: #18243b; border: 1px solid var(--ht-line); color: var(--ht-text); border-radius: 10px; }
body.versionFive .commentBox.lightBox { background: #202e47; }
body.versionFive .commentBox:before { border-color: transparent transparent transparent #18243b; }
body.versionFive .commentBox.lightBox:before { border-color: transparent transparent transparent #202e47; }
body.versionFive .commentBox .commentText { color: #d6e2f2; }

/* Profiles, team and inventory */
body.versionFive .teamTitle { color: #b8d4f7; }
body.versionFive .teamTitle span { background: var(--ht-background); }
body.versionFive .teamContainer .teamBox { background: var(--ht-panel); border: 1px solid var(--ht-line); border-radius: 12px; }
body.versionFive .teamContainer .teamBox .userInfo { color: var(--ht-muted); font-style: normal; }
body.versionFive .profilContainer .profilHead { background: #1a2943; border: 1px solid var(--ht-line); border-radius: 12px; }
body.versionFive .profilContainer .profilHead .profilMotto { color: #d0dff3; }
body.versionFive .profilContainer .pfofilContent dl { background: var(--ht-panel); border-radius: 10px; }
body.versionFive .profilContainer .profilBadges .badgeItem { background: var(--ht-item); border-color: var(--ht-line); border-radius: 8px; }
body.versionFive .profilImgContainer, body.versionFive .furniImgBox { background-color: #111a2d; border-radius: 12px; }

/* Detail overlays, login and feedback */
body.versionFive .modal-backdrop { background: #020915; }
body.versionFive .modal-dialog .modal-content { background: #10192d; border: 1px solid #3d5375; border-radius: 14px; color: var(--ht-text); box-shadow: 0 22px 44px rgba(0,0,0,.35); }
body.versionFive .modal-header, body.versionFive .modal-footer { border-color: var(--ht-line); }
body.versionFive .modal-title, body.versionFive .logText { color: #f1f6ff; }
body.versionFive #popUpLogin .modal-content { background: #10192d; }
body.versionFive #popUpLogin .wechsel { background: #202e47; border-color: #506d98; color: #e4efff; }
body.versionFive #popUpLogin .wechsel:hover { background: #304a70; border-color: #779ccd; }
body.versionFive #popUpLogin .formInfo.danger { background: #273a59; }
body.versionFive .modal .btn-close { filter: invert(1); opacity: .75; }
body.versionFive .popUpContainer { background: rgba(3,8,18,.8); }
body.versionFive .popUpContainer .popUpBox { background: #10192d; border: 1px solid #3d5375; border-radius: 14px; box-shadow: 0 24px 48px rgba(0,0,0,.32); }
body.versionFive .popUpContainer .popUpLoader { background: #10192d; }
body.versionFive .popUpContainer .itemPriceBox { background: #202e47; }
body.versionFive .popUpContainer .owner { background: var(--ht-item); border-color: var(--ht-line); }
body.versionFive .popUpContainer .itemClass, body.versionFive .popUpContainer .lastPriceBox { color: var(--ht-muted); opacity: 1; }
body.versionFive .childAlert { background: #263a59; border: 1px solid var(--ht-line); border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.22); }
body.versionFive .alertMessageError { background: #823b49; }
body.versionFive .alertMessageSucces { background: #2d694b; }
body.versionFive #footer .footerInfo { background: #10172a; color: #c0cee1; }
body.versionFive #footer .footerInfo a { color: #dbeafe; }
body.versionFive #footer .footerInfo .sulakeText { color: #aebdd2; opacity: 1; }

/* Standalone maintenance and error pages */
body.maintenancePage.versionFive { min-height: 100vh; background: #00081a; color: #eef5ff; }
body.maintenancePage.versionFive .maintenanceBg { opacity: .13; }
body.maintenancePage.versionFive .maintenanceCon { width: min(100% - 32px,560px); padding: 38px 24px; background: rgba(16,23,42,.94); border: 1px solid var(--ht-line); border-radius: 16px; box-shadow: 0 24px 50px rgba(0,0,0,.27); }
body.maintenancePage.versionFive .maintenanceCon .claim { color: #f0f6ff; letter-spacing: 1px; }
body.maintenancePage.versionFive .maintenanceCon .claim span { color: #bcd3f2; letter-spacing: 1px; }
body.maintenancePage.versionFive .maintenanceCon .btn { display: inline-flex; justify-content: center; min-width: 150px; margin-top: 22px; }

@media (max-width: 991px) {
  body.versionFive #navigation { background: #10172a; }
  body.versionFive #navigation nav ul.navi > li > a { width: 100%; display: flex; padding: 11px 18px; }
  body.versionFive #navigation nav ul.navi > li:hover > a, body.versionFive #navigation nav ul.navi > li.active > a { background: #263651; }
}
@media (max-width: 639px) {
  body.versionFive main#content h1 { font-size: 30px; }
  body.versionFive main#content h2 { font-size: 25px; }
  body.versionFive .nav.nav-tabs, body.versionFive .nav.nav-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  body.versionFive .nav.nav-tabs .nav-link, body.versionFive .nav.nav-pills .nav-link { white-space: nowrap; font-size: 13px; padding: 9px 12px; }
  body.versionFive .paginationjs .paginationjs-pages li > a { min-width: 32px; }
}

/* Main navigation: stable height, clear current page and a usable mobile drawer. */
body.versionFive #navigation { height: 64px; }
body.versionFive #navigation nav { min-height: 64px; align-items: center; }
body.versionFive #navigation nav ul.navi.naviLeft { justify-content: flex-start; padding: 0 16px; gap: 2px; }
body.versionFive #navigation nav ul.navi > li > a { padding: 10px 11px; border-radius: 8px; }
body.versionFive #navigation nav ul.navi > li > a:hover,
body.versionFive #navigation nav ul.navi > li > a:focus-visible { background: #263651; color: #fff; }
body.versionFive #navigation nav ul.navi > li > a[aria-current="page"] { background: #263e60; color: #fff; }
body.versionFive #navigation nav ul.navi > li { position: relative; }
body.versionFive #navigation nav ul.navi.naviRight { padding-right: 16px; }
body.versionFive #navigation nav ul.navi > li.login { padding: 0; }
body.versionFive #navigation .navLogin { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 0; background: transparent; color: #fff; font: inherit; cursor: pointer; }
body.versionFive #navigation .navLogin:hover { color: #fff; }
body.versionFive #header { margin-top: 64px; }
#navBackdrop[hidden] { display: none; }
#navBackdrop { position: fixed; inset: 56px 0 0; z-index: 1001; width: 100%; border: 0; background: rgba(3,8,18,.72); }

/* News cards keep the subtitle readable at every slider width. */
body#index main#content .newsContainer .newsBox { min-height: 168px; }
body#index main#content .newsContainer .newsBox .newsContent { width: 100%; padding: 14px 16px; display: flex; flex-direction: column; justify-content: flex-end; }
body#index main#content .newsContainer .newsBox .newsHeadline { margin-bottom: 5px; line-height: 1.25; }
body#index main#content .newsContainer .newsBox .shortNews { margin-bottom: 7px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body#index main#content .newsContainer .newsBox .newsInfos { line-height: 1.25; }

/* A bounded, searchable alternative to long native select popups. */
.filterSelects .filterField { display: grid; gap: 8px; margin-bottom: 16px; color: #c9d7eb; font-size: 12px; }
.filterSelects .filterField[hidden] { display: none !important; }
.filterSelects select[hidden] { display: none !important; }
.filterCombo { min-width: 0; }
.filterComboTrigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid rgba(111,145,187,.35); border-radius: 8px; background: var(--ht-item); color: #f2f6ff; font-size: 13px; text-align: left; cursor: pointer; }
.filterComboTrigger::after { content: ''; width: 8px; height: 8px; flex: none; border-right: 2px solid #bed8ff; border-bottom: 2px solid #bed8ff; transform: rotate(45deg) translateY(-2px); }
.filterComboTrigger:hover, .filterComboTrigger[aria-expanded="true"] { border-color: #75a8e6; background: #27364f; }
.filterComboMenu { margin-top: 6px; padding: 9px; border: 1px solid rgba(111,145,187,.35); border-radius: 9px; background: #18243a; }
.filterComboMenu[hidden] { display: none; }
.filterComboSearch { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid #526b8e; border-radius: 7px; background: #0e1729; color: #f2f6ff; font-size: 13px; }
.filterComboSearch::placeholder { color: #b7c8df; }
.filterComboStatus { padding: 7px 3px 4px; color: #b7c8df; font-size: 11px; }
.filterComboOptions { max-height: min(220px, 30vh); overflow-y: auto; scrollbar-color: #526b8e #18243a; }
.filterComboOption { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: #e4edfb; font-size: 13px; text-align: left; cursor: pointer; }
.filterComboOption:hover, .filterComboOption:focus-visible { background: #304766; color: #fff; }
.filterComboOption[aria-selected="true"] { background: #263e60; color: #fff; }

@media (max-width: 1199px) {
  body.versionFive #quickbar { display: flex; z-index: 1003; height: 56px; padding: 0 16px; }
  body.versionFive #quickbar .quickLogin { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: transparent; color: #f2f6ff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  body.versionFive #quickbar #navToggle { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--ht-line); border-radius: 8px; background: #202e47; cursor: pointer; }
  body.versionFive #quickbar #navToggle:hover { background: #304766; }
  body.versionFive #quickbar .burgerMenu { display: block; position: relative; width: 20px; height: 14px; }
  body.versionFive #quickbar .burgerMenu::before, body.versionFive #quickbar .burgerMenu::after, body.versionFive #quickbar .burgerMenu span { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: #e6f1ff; border-radius: 2px; }
  body.versionFive #quickbar .burgerMenu::before { top: 0; }
  body.versionFive #quickbar .burgerMenu span { top: 6px; }
  body.versionFive #quickbar .burgerMenu::after { top: 12px; }
  body.versionFive #navigation { top: 56px; right: 0; bottom: 0; left: auto; width: min(330px,88vw); height: auto; min-width: 0; transform: translateX(100%); transition: transform .22s cubic-bezier(.22,1,.36,1); }
  body.versionFive.navOpen #navigation { transform: translateX(0); }
  body.versionFive.navOpen { overflow: hidden; }
  body.versionFive #navigation nav { min-height: 0; height: auto; display: block; padding: 12px 0 24px; }
  body.versionFive #navigation nav ul.navi.naviLeft { display: block; width: 100%; max-width: 100%; padding: 0 10px; }
  body.versionFive #navigation nav ul.navi.naviRight { display: none; }
  body.versionFive #navigation nav ul.navi > li { border: 0; }
  body.versionFive #navigation nav ul.navi > li > a { min-height: 46px; width: 100%; padding: 11px 13px; }
  body.versionFive #header { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { body.versionFive #navigation { transition: none; } }