/* Top navigation — guest CTA layout, narrower search, icon submit, sizing */

body .navbar .navbar-brand {
  padding-left: 16px;
  /* Leave room for hamburger / right actions; CZ wordmark is much wider than SK */
  max-width: min(280px, calc(100vw - 100px));
  min-width: 0;
}

body .navbar .navbar-brand img {
  display: block;
  height: auto;
  width: auto;
  max-height: 32px;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  body .navbar .navbar-brand {
    max-width: calc(100vw - 88px);
  }

  body .navbar .navbar-brand img {
    max-height: 28px;
  }
}

@media (min-width: 992px) {
  body .navbar .navbar-brand {
    padding-left: 24px;
    max-width: 280px;
  }
}

body .navbar .nav-right-zone,
body .navbar .nav-auth-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

body .navbar .nav-auth-zone {
  flex-direction: row;
}

body .navbar .nav-search-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

body .navbar .xp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.15);
  border: 1px solid rgba(245, 166, 35, 0.3);
  color: #ffd37a;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body .navbar .nav-link.xp-chip {
  padding: 4px 10px !important;
  line-height: 1.25;
}

body .navbar .nav-notif {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none !important;
}

body .navbar .nav-notif:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

body .navbar .nav-notif::after {
  display: none;
}

body .navbar .nav-notif-icon {
  font-size: 18px;
}

body .navbar .nav-notif-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e05555, #c23030);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 5px;
  line-height: 1;
  border: 2px solid #120c71;
}

body .navbar .nav-notif-badge:empty {
  display: none;
}

body .navbar .nav-notif-dropdown.dropdown-menu {
  padding: 0;
  margin: 0;
  float: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1b174f;
}

body .navbar .nav-notif-dropdown-wrap {
  position: relative;
}

body .navbar .nav-notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto !important;
  bottom: auto;
  display: flex;
  flex-direction: column;
  min-width: 360px;
  max-width: 400px;
  max-height: min(480px, calc(100vh - 80px));
  margin-top: 0;
  background: #1b174f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transform: none !important;
  z-index: 1050;
}

body .navbar .nav-notif-dropdown-wrap.show .nav-notif-dropdown,
body .navbar .nav-notif-dropdown-wrap.hovered .nav-notif-dropdown,
body .navbar .nav-notif-dropdown.show {
  display: flex !important;
  flex-direction: column;
}

body .navbar .nav-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body .navbar .nav-notif-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

body .navbar .nav-notif-count {
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 85, 85, 0.18);
  color: #f08080;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 7px;
}

body .navbar .nav-notif-list {
  flex: 1;
  min-height: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

body .navbar .nav-notif-item {
  display: block;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: background-color 0.15s;
}

body .navbar .nav-notif-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.95);
}

body .navbar .nav-notif-item:last-child {
  border-bottom: none;
}

body .navbar .nav-notif-item-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

body .navbar .nav-notif-icon-area {
  min-width: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

body .navbar .nav-notif-icon-area i {
  font-size: 13px;
}

body .navbar .nav-notif-type-end {
  color: #f5a623;
}

body .navbar .nav-notif-type-result {
  color: #30c48d;
}

body .navbar .nav-notif-type-cat {
  color: #5b8df5;
}

body .navbar .nav-notif-content {
  flex: 1;
  min-width: 0;
}

body .navbar .nav-notif-item-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

body .navbar .nav-notif-item-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

body .navbar .nav-notif-empty {
  padding: 32px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}

body .navbar .nav-notif-empty-icon {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
  opacity: 0.3;
}

body .navbar .nav-notif-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
}

body .navbar .nav-notif-footer-link {
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: color 0.2s;
}

body .navbar .nav-notif-footer-link:hover {
  color: rgba(255, 255, 255, 0.88);
}

/* I12: the bell's "mark all read" is a form button now - it keeps the link's look (no button chrome). */
body .navbar .nav-notif-footer-form {
  margin: 0;
}

body .navbar .nav-notif-footer-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

body .navbar .nav-notif-footer-check {
  font-size: 10px;
}

body .navbar .nav-notif-view-all {
  display: block;
  flex-shrink: 0;
  padding: 12px 18px;
  background: rgba(61, 109, 242, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #5b8df5;
  text-decoration: none;
  transition: background-color 0.2s;
}

body .navbar .nav-notif-view-all:hover {
  background: rgba(61, 109, 242, 0.18);
  color: #7ba4f7;
}

@media (max-width: 991px) {
  body .navbar .nav-notif-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.2s;
  }

  body .navbar .nav-notif-mobile:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }

  body .navbar .nav-notif-mobile i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
  }

  body .navbar .nav-notif-mobile-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(224, 85, 85, 0.18);
    color: #f08080;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 0 7px;
  }
}

body .navbar .nav-search-input {
  max-width: 160px !important;
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  body .navbar .nav-search-input {
    max-width: 120px !important;
  }
}

@media (max-width: 992px) {
  body .navbar .nav-search-input {
    display: none !important;
  }

  body .navbar .nav-search-submit {
    display: none !important;
  }

  body .navbar #navbarNav .nav-search-form {
    display: none !important;
  }

  body .navbar .nav-search-mobile-fallback {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    opacity: 0.95;
    text-decoration: none !important;
  }

  body .navbar .nav-search-mobile-fallback .fa-search {
    font-size: 1rem;
  }
}

body .navbar .nav-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  flex-shrink: 0;
  line-height: 1;
}

body .navbar .nav-search-submit:hover {
  filter: brightness(1.08);
}

body .navbar .nav-search-submit .fa-search {
  font-size: 14px;
}

body .navbar .nav-search-mobile-fallback {
  display: none;
}

@media (min-width: 992px) {
  body .navbar.navbar {
    font-size: 13.5px;
    min-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body .navbar .navbar-brand img,
  body .navbar .navbar-brand svg {
    max-height: 32px !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body .navbar .nav-link {
    font-size: 13.5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.btn-nav-login {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-nav-login:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

.btn-nav-register {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: #3d6df2;
  border: none;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: filter 0.15s;
  white-space: nowrap;
}

.btn-nav-register:hover {
  filter: brightness(1.12);
  color: #fff !important;
}

.nav-guest-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Mobile drawer — guest full-width CTAs */
.drawer-guest-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 10px 16px 8px;
}

.drawer-auth-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 6px 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  transition: background 0.15s, filter 0.15s;
}

.drawer-auth-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.9) !important;
}

.drawer-auth-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

.drawer-auth-btn--primary {
  border: none;
  background: #3d6df2;
  color: #fff !important;
}

.drawer-auth-btn--primary:hover {
  filter: brightness(1.1);
  color: #fff !important;
}

/* P2-F7 PRO Club avatar frame (locked 2026-05-14).
   Applied via th:classappend on .profile-avatar (profil.html) and on the desktop +
   mobile drawer avatar <img> elements (topnav.html) when the user is PRO.
   Uses outline + box-shadow (not border) so the gold ring layers around any
   existing border without clobbering it — see the mobile drawer avatar which
   has an inline 2px white-translucent border. Single static rule; no
   animation (prefers-reduced-motion is therefore a no-op concern). The PRO
   palette #fad776 matches the existing "Získaj PRO" button + "👑 PRO" badge.
   Class is utility-style (no element coupling) so it works on any avatar
   shape — circle or rounded square. */
.pro-frame {
  outline: 2px solid #fad776;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(250, 215, 118, 0.3);
}

/* Center-nav main dropdowns (Súťaže, Hraj) — dark panel, centered positioning preserved */
body .navbar .nav-item.dropdown > .nav-link {
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

body .navbar .nav-item.dropdown:hover > .nav-link,
body .navbar .nav-item.dropdown.show > .nav-link {
  background: rgba(255, 255, 255, 0.06);
}

body .navbar .nav-main-dropdown {
  min-width: 240px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #1b174f;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  padding: 8px;
  overflow: hidden;
}

body .navbar .nav-main-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.25;
  white-space: normal;
  background-color: transparent;
}

body .navbar .nav-main-dropdown .dropdown-item i {
  width: 18px;
  padding: 0; /* B-116: theme.min.css gives every .fa padding: 20px, which made each item 77px tall instead of 44px */
  margin-right: 0 !important;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.78;
  color: rgba(255, 255, 255, 0.58) !important;
}

body .navbar .nav-main-dropdown .dropdown-item.active,
body .navbar .nav-main-dropdown .dropdown-item:active,
body .navbar .nav-main-dropdown .dropdown-item:hover,
body .navbar .nav-main-dropdown .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

body .navbar .nav-main-dropdown .dropdown-item.active i,
body .navbar .nav-main-dropdown .dropdown-item:active i,
body .navbar .nav-main-dropdown .dropdown-item:hover i,
body .navbar .nav-main-dropdown .dropdown-item:focus i {
  color: rgba(255, 255, 255, 0.82) !important;
}

body .navbar .nav-main-dropdown .dropdown-divider {
  margin: 10px 0;
  border-color: rgba(255, 255, 255, 0.08);
}

/* I24 - „Hraj“ with the hub on is the word and nothing else: the same item as „Súťaže“ (the generic .nav-item.dropdown rules above give
   it the pill on hover and while open, the base rules its padding and line), no caret, no frame on any part. F3 / I1 had made it a
   pair - the word and a caret that was the dropdown toggle - with a drawn chevron, its own pill on the li, a hit area and a
   white :focus-visible outline; the hover script's dropdown('show') focused the caret and the outline framed it as soon as the
   mouse was over the item. The theme's script still needs a [data-toggle="dropdown"] in the item to open the menu on hover, so
   it stays as an invisible helper: it fills the item (so the menu is placed as under „Súťaže“) but is hidden, takes no pointer
   events and, being hidden, cannot take focus - there is nothing to draw an outline on. It has no .nav-link class, so none of the
   link rules (hover pill, padding) reach it. */
/* Keyboard focus on the word: the theme draws no outline on a navbar link (nothing shows on „Súťaže“ either), so the word takes the pill,
   a little firmer than the hover one - the only mark a keyboard user gets, and no frame. */
body .navbar .nav-item.nav-play > .nav-play-link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

body .navbar .nav-item.nav-play > .nav-play-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

/* F3 - the centre list stays on ONE line from 992 px up. A logged-out visitor now also has „Hraj“ (six links), which in the
   narrower languages (CZ) wrapped „TOP soutěže“ and „Pro firmy“ onto two lines between 992 and 1099 px: the links do not wrap,
   sit a little closer below 1200 px, the logo keeps its size, and the blurred „??? Body“ teaser of a guest gives way below
   1100 px (it is decoration; from 1100 px up everything fits with it). */
@media (min-width: 992px) {
  body .navbar .navbar-nav.mx-auto > .nav-item > .nav-link {
    white-space: nowrap;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  body .navbar .navbar-nav.mx-auto > .nav-item > .nav-link {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body .navbar .navbar-brand {
    flex-shrink: 0;
  }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
  body .navbar #navbarNav .nav-right-zone .nav-guest-body {
    display: none !important;
  }
}

/* F3/F7 - the calendar item: an emoji where the other items have a Font Awesome icon, the title and a small state line. F7: the
   emoji is an element of its own (<span>, no longer <i class="fa">): Font Awesome's font, the theme's .fa padding and size and the
   grey, dimmed (opacity .78) look of the icon rules above never touch it, so it keeps the system's colour emoji font at full
   opacity - and it sits in the same 18px icon column as its neighbours' icons, so the text lines up. */
body .navbar .nav-main-dropdown .dropdown-item .nav-play-emoji,
body .navbar .nav-mobile-drawer-item .nav-mobile-emoji {
  display: block;
  width: 18px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  font-style: normal;
  font-weight: 400;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  opacity: 1;
  color: inherit;
}

/* F7 - the „Hraj“ menu is a little wider than the other dropdowns (280 instead of 240 px): the calendar's bold title - e.g. „Adventný
   kalendár 2026“ - then fits on one line and the item is as tall as title + state line need (about 56 px), not 75 px with a wrapped
   title. A longer title still wraps; the drawer has the width already. */
body .navbar .nav-main-dropdown.nav-play-menu {
  min-width: 280px;
}

/* I6 - the „Advent“ menu (own calendar with its state line, other calendars) is as wide as „Hraj“ */
body .navbar .nav-main-dropdown.nav-advent-menu {
  min-width: 280px;
}

/* I6 - logged in, in Christmas mode the bar has one more item. Measured at 992 px with the Czech labels and logo (the widest case):
   seven items push the XP chip, the bell and the avatar 25 px out of the window (the bar had room for six). Between 992 and 1099 px
   the „Advent“ emoji gives its ~21 px back and „Blog“ (only when the Advent item is there) yields its ~48 px - together the bar is
   as it was before the item. Above 1100 px nothing is dropped. */
@media (min-width: 992px) and (max-width: 1099.98px) {
  body .navbar .nav-advent .nav-advent-emoji,
  body .navbar .nav-item.nav-yields-to-advent {
    display: none;
  }
}

body .navbar .nav-play-calendar-text,
body .navbar .nav-mobile-calendar-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body .navbar .nav-play-calendar-title,
body .navbar .nav-mobile-calendar-text > span {
  display: block;
  font-weight: 700;
  overflow-wrap: anywhere;
}

body .navbar .nav-play-calendar-state,
body .navbar .nav-mobile-calendar-text > small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.62);
}

/* Navbar profile avatar + dropdown */
body .navbar .nav-profile-dropdown-wrap {
  position: relative;
}

body .navbar .nav-profile-trigger {
  padding: 4px !important;
  border-radius: 999px;
}

body .navbar .nav-profile-trigger::after {
  margin-left: 2px;
}

body .navbar .nav-profile-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3d6df2, #7b2fbe);
  color: #fff;
  font-family: "Cabinet Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(61, 109, 242, 0.28);
  flex-shrink: 0;
}

body .navbar .nav-profile-avatar.is-pro {
  background: linear-gradient(135deg, #7b2fbe, #fad776);
  box-shadow:
    0 0 0 2px #1b174f,
    0 0 0 4px #fad776,
    0 4px 14px rgba(255, 215, 0, 0.2);
}

body .navbar .nav-profile-dropdown {
  margin-top: 12px;
  margin-right: 0;
  min-width: 240px;
  max-width: min(280px, calc(100vw - 32px));
  right: 0;
  left: auto !important;
  transform: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #1b174f;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  padding: 8px;
  overflow: hidden;
}

body .navbar .nav-profile-dropdown-head {
  padding: 10px 14px 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  border-radius: 10px;
  margin-bottom: 0;
}

body .navbar .nav-profile-dropdown-head small {
  color: inherit;
  font-size: inherit;
}

body .navbar .nav-profile-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  white-space: normal;
  background-color: transparent;
}

body .navbar .nav-profile-dropdown .dropdown-item i {
  width: 18px;
  padding: 0; /* B-116 (see .nav-main-dropdown above) */
  margin-right: 0 !important;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.85;
  color: rgba(255, 255, 255, 0.45);
}

body .navbar .nav-profile-dropdown .dropdown-item.active,
body .navbar .nav-profile-dropdown .dropdown-item:active,
body .navbar .nav-profile-dropdown .dropdown-item:hover,
body .navbar .nav-profile-dropdown .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

body .navbar .nav-profile-dropdown .dropdown-item.active i,
body .navbar .nav-profile-dropdown .dropdown-item:active i,
body .navbar .nav-profile-dropdown .dropdown-item:hover i,
body .navbar .nav-profile-dropdown .dropdown-item:focus i {
  color: rgba(255, 255, 255, 0.65) !important;
}

body .navbar .nav-profile-dropdown .dropdown-item.text-danger {
  color: #ff8a8a !important;
}

body .navbar .nav-profile-dropdown .dropdown-item.text-danger:hover,
body .navbar .nav-profile-dropdown .dropdown-item.text-danger:focus {
  background: rgba(255, 80, 80, 0.12);
  color: #ffb4b4 !important;
}

body .navbar .nav-profile-dropdown .dropdown-divider {
  margin: 10px 0;
  border-color: rgba(255, 255, 255, 0.08);
}

@media (min-width: 992px) {
  body .navbar .nav-profile-dropdown-wrap {
    margin-right: 30px;
    padding-right: 8px;
  }
}

@media (max-width: 576px) {
  body .navbar .nav-profile-dropdown-wrap {
    margin-right: 8px;
  }

  body .navbar .nav-profile-trigger {
    margin-right: 0;
  }

  body .navbar .nav-profile-dropdown {
    position: fixed !important;
    top: 64px !important;
    right: 8px !important;
    left: auto !important;
    width: auto !important;
    max-width: calc(100vw - 16px);
  }
}

/* Mobile drawer — dark menu language aligned with desktop dropdowns */
body .navbar .nav-mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1049;
}

body .navbar #mobileDrawer.nav-mobile-drawer {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  max-width: calc(100vw - 48px);
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1050;
  background: #17134a;
  color: rgba(255, 255, 255, 0.88);
  transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.35);
}

body .navbar .nav-mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

body .navbar .nav-mobile-drawer-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}

body .navbar .nav-mobile-drawer-close:hover,
body .navbar .nav-mobile-drawer-close:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

body .navbar .nav-mobile-profile {
  margin: 12px 12px 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

body .navbar .nav-mobile-profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

body .navbar .nav-profile-avatar--mobile {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 16px;
}

body .navbar .nav-mobile-profile-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.25;
}

body .navbar .nav-mobile-profile-stats {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  margin-top: 2px;
}

body .navbar .nav-mobile-profile-xp {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

body .navbar .nav-mobile-profile-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5a623, #ffd978);
}

body .navbar .nav-mobile-profile-pro {
  margin-top: 10px;
}

body .navbar .nav-mobile-pro-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: filter 0.15s ease;
}

body .navbar .nav-mobile-pro-badge--active {
  background: #7b2fbe;
  color: #fff !important;
}

body .navbar .nav-mobile-pro-badge--cta {
  background: #fad776;
  color: #1a1a1a !important;
}

body .navbar .nav-mobile-pro-badge--cta:hover {
  filter: brightness(1.06);
}

body .navbar .nav-mobile-drawer-nav {
  padding: 8px 12px 16px;
}

body .navbar .nav-mobile-drawer-section {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  padding: 14px 14px 6px;
  margin: 0;
}

body .navbar .nav-mobile-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.9rem;
  line-height: 1.25;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

body .navbar .nav-mobile-drawer-item i,
body .navbar .nav-mobile-drawer-item .fa {
  width: 18px;
  padding: 0; /* B-116 (see .nav-main-dropdown above) */
  margin-right: 0 !important;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.78;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.88rem;
}

body .navbar .nav-mobile-drawer-item:hover,
body .navbar .nav-mobile-drawer-item:focus,
body .navbar .nav-mobile-drawer-item.active {
  background: rgba(255, 255, 255, 0.07);
  color: #fff !important;
}

body .navbar .nav-mobile-drawer-item:hover i,
body .navbar .nav-mobile-drawer-item:focus i,
body .navbar .nav-mobile-drawer-item.active i {
  color: rgba(255, 255, 255, 0.82) !important;
}

body .navbar .nav-mobile-drawer-item--danger {
  color: #ff8a8a !important;
}

body .navbar .nav-mobile-drawer-item--danger i {
  color: rgba(255, 138, 138, 0.85) !important;
}

body .navbar .nav-mobile-drawer-item--danger:hover,
body .navbar .nav-mobile-drawer-item--danger:focus {
  background: rgba(255, 80, 80, 0.12);
  color: #ffb4b4 !important;
}

body .navbar .nav-mobile-drawer-nav .drawer-guest-divider,
body .navbar .nav-mobile-drawer-nav hr.drawer-guest-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 10px 14px;
}

/* ── Drawer logout is a POST form, so its item is a <button> (LOGOUT-2). Specificity (0,2,2)
   deliberately beats `body .navbar .nav-mobile-drawer-item` (0,2,1) above; padding, gap,
   font-size and colour are left to that rule so the button matches its <a> siblings. ── */
body .navbar button.nav-mobile-drawer-item {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ── K11 (B-150) - keyboard focus on EVERY item of the bar and of the drawer ──────────────────────────────────────────────────────
   The theme draws no outline on a navbar link, so a keyboard user could not see where they were on „Súťaže“, „Advent“, the bell, the
   avatar or any drawer item (only „Hraj“ had a mark since I24). Every item now takes the same soft pill on :focus-visible - the
   background of „Hraj“, a little firmer than the hover one - and nothing else: no outline, no border, no ring. :focus-visible matches
   a keyboard (or script-from-keyboard) focus only, so a mouse hover or click never gets a mark; the :not(:focus-visible) rule below
   keeps a browser default from drawing a frame on a clicked item. A filled button (Registrovať sa) has no background to lighten, so
   it brightens instead. Placed last so it wins over the :focus rules above; !important only where those carry it. ── */
body .navbar .nav-link:focus-visible,
body .navbar .nav-notif:focus-visible,
body .navbar .navbar-brand:focus-visible,
body .navbar .navbar-toggler:focus-visible,
body .navbar .btn-nav-login:focus-visible,
body .navbar .nav-notif-view-all:focus-visible,
body .navbar .nav-notif-footer-link:focus-visible,
body .navbar .nav-mobile-drawer-close:focus-visible,
body .navbar .nav-mobile-pro-badge:focus-visible,
body .navbar .drawer-link:focus-visible,
body .navbar .drawer-auth-btn--ghost:focus-visible,
body .navbar .nav-mobile-drawer-item:focus-visible,
body .navbar .nav-main-dropdown .dropdown-item:focus-visible,
body .navbar .nav-profile-dropdown .dropdown-item:focus-visible,
body .navbar .nav-notif-dropdown .dropdown-item:focus-visible {
  outline: none !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

body .navbar .btn-nav-register:focus-visible,
body .navbar .drawer-auth-btn--primary:focus-visible {
  outline: none !important;
  filter: brightness(1.25);
}

body .navbar a:focus:not(:focus-visible),
body .navbar button:focus:not(:focus-visible) {
  outline: none !important;
}

/* The pill of a plain (non-dropdown) link is round like the dropdown links' hover pill, not a square patch. */
body .navbar .nav-link:focus-visible {
  border-radius: 999px;
}