/* @itZEN-CONFIG SECURITY=strict VERSIONING=2026-10-13-LANGUAGE-V1 LOG=disable */
/* @itZEN-FILE FILE=customer_language_nav.css | PATH=/assets/css/customer_language_nav.css | STATUS=NEW */
/* @itZEN-ROLE: Responsive customer language picker and SITEWEB navigation polish. */
.qo-language-picker {
  position:fixed;top:12px;right:clamp(12px,2vw,28px);
  z-index:1200;font-family:inherit;color:#1e3c35
}
.qo-language-trigger {
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-width:92px;min-height:46px;padding:8px 15px;
  background:#fff;border:1px solid #dce8e1;border-radius:999px;
  box-shadow:0 5px 20px rgba(19,55,39,.12);
  font-size:15px;font-weight:800;cursor:pointer;list-style:none;
  touch-action:manipulation
}
.qo-language-trigger::-webkit-details-marker{display:none}
.qo-language-trigger .fa-globe{font-size:19px;color:#17825b}
.qo-language-chevron{font-size:10px;color:#657a6f}
.qo-language-picker[open] .qo-language-trigger{border-color:#15885e}
.qo-language-menu {
  position:absolute;top:calc(100% + 9px);right:0;
  width:250px;padding:12px;
  background:#fff;border:1px solid #e2ece6;border-radius:20px;
  box-shadow:0 18px 50px rgba(17,46,32,.2)
}
.qo-language-heading{font-weight:800;font-size:14px;padding:8px 10px 12px}
.qo-language-form{margin:0}
.qo-language-option{
  display:flex;align-items:center;gap:12px;width:100%;min-height:52px;
  border:0;border-radius:13px;padding:9px 12px;
  background:transparent;color:#263d34;text-align:left;
  font-size:15px;font-weight:650;cursor:pointer;touch-action:manipulation
}
.qo-language-option:hover,.qo-language-option:focus-visible{background:#edf7f0}
.qo-language-option.is-selected{background:#e5f5eb;color:#11734e}
.qo-language-code{
  display:grid;place-items:center;min-width:40px;height:32px;
  border-radius:9px;background:#f1f5f2;font-size:12px;letter-spacing:.05em
}
.qo-language-option .fa-check{margin-left:auto;color:#168359}
body.kiosk-mode .qo-language-picker{top:16px;right:18px}
body.kiosk-mode .qo-language-trigger{min-height:60px;min-width:110px;font-size:19px}
body.kiosk-mode .qo-language-menu{width:320px;padding:16px}
body.kiosk-mode .qo-language-option{min-height:70px;font-size:19px}
body.kiosk-mode .qo-language-code{min-width:50px;height:43px;font-size:16px}
/* SITEWEB top navigation: preserve all existing links and login behavior. */
body:not(.kiosk-mode) .top-nav{
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid #e2ece6!important;
  box-shadow:0 4px 18px rgba(28,61,44,.065)!important
}
body:not(.kiosk-mode) .top-nav>.nav{
  display:flex!important;align-items:center!important;
  justify-content:flex-start!important;
  gap:clamp(5px,1.3vw,18px)!important;
  padding-right:clamp(100px,13vw,170px)!important
}
body:not(.kiosk-mode) .top-nav .nav-link{
  border-radius:13px!important;
  padding:8px clamp(8px,1.2vw,17px)!important;
  font-weight:650!important;
  transition:background .15s,color .15s
}
body:not(.kiosk-mode) .top-nav .nav-link:hover,
body:not(.kiosk-mode) .top-nav .nav-link.active{
  background:#e9f5ee!important;color:#137c56!important
}
body:not(.kiosk-mode) .top-nav .nav-link i{color:#278d67!important}
@media (max-width:850px) {
  body:not(.kiosk-mode) .qo-language-picker{top:8px;right:8px}
  body:not(.kiosk-mode) .qo-language-trigger{min-width:75px;min-height:42px;padding:7px 10px;gap:6px}
  body:not(.kiosk-mode) .top-nav>.nav{padding-right:88px!important;gap:3px!important}
  body:not(.kiosk-mode) .top-nav .nav-link{padding:6px!important}
  body:not(.kiosk-mode) .top-nav .nav-link span{font-size:11px}
  .qo-language-menu{width:min(260px,calc(100vw - 16px))}
}
/* V2: KIOSK content starts below the fixed language control, including
   category pages and article configuration. Keep the left rail untouched. */
@media (min-width: 992px) {
  body.kiosk-mode #kiosk-main {
    padding-top: 96px !important;
  }
}
@media (max-width: 991px) {
  body.kiosk-mode #kiosk-main {
    padding-top: 24px !important;
  }
}
body.kiosk-mode .qo-language-picker {
  z-index: 1200;
}
/* V2: SITEWEB navigation uses the full available width while reserving
   a dedicated space for the language picker at the right. */
body:not(.kiosk-mode) .top-nav > .nav {
  width: 100% !important;
  box-sizing: border-box;
  justify-content: space-evenly !important;
  gap: clamp(8px, 1.5vw, 24px) !important;
  padding-left: clamp(12px, 2vw, 32px) !important;
  padding-right: clamp(120px, 15vw, 190px) !important;
}
body:not(.kiosk-mode) .top-nav .nav-link {
  flex: 1 1 0;
  min-width: 0;
}
body:not(.kiosk-mode) .top-nav .nav-item {
  flex: 0 0 auto;
}
@media (max-width: 850px) {
  body:not(.kiosk-mode) .top-nav > .nav {
    justify-content: space-between !important;
    gap: 2px !important;
    padding-left: 4px !important;
    padding-right: 90px !important;
  }
  body:not(.kiosk-mode) .top-nav .nav-link {
    flex: 1 1 0;
  }
}
/* SITEWEB navigation breathing room: desktop + narrow/mobile viewports.
   Keep the fixed header height predictable for the restaurant bar below. */
body:not(.kiosk-mode) .top-nav {
  min-height: 82px !important;
}
body:not(.kiosk-mode) .top-nav > .nav {
  min-height: 82px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  align-items: center !important;
}
body:not(.kiosk-mode) .top-nav .nav-link {
  min-height: 56px;
  justify-content: center;
  gap: 5px;
  line-height: 1.25;
}
body:not(.kiosk-mode) .top-nav .nav-link i {
  margin-bottom: 0 !important;
}
body:not(.kiosk-mode) .restaurant-header {
  top: 82px !important;
}
body:not(.kiosk-mode) .qo-language-picker {
  top: 18px;
}
@media (max-width: 850px) {
  body:not(.kiosk-mode) .top-nav,
  body:not(.kiosk-mode) .top-nav > .nav {
    min-height: 90px !important;
  }
  body:not(.kiosk-mode) .top-nav > .nav {
    padding: 12px 94px 12px 6px !important;
    gap: 4px !important;
    align-items: stretch !important;
  }
  body:not(.kiosk-mode) .top-nav .nav-link {
    min-height: 66px;
    padding: 6px 3px !important;
    gap: 5px;
    overflow-wrap: anywhere;
  }
  body:not(.kiosk-mode) .top-nav .nav-link span {
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }
  body:not(.kiosk-mode) .top-nav .nav-link i {
    font-size: 19px;
  }
  body:not(.kiosk-mode) .restaurant-header {
    top: 90px !important;
  }
  body:not(.kiosk-mode) .qo-language-picker {
    top: 22px;
  }
}
@media (max-width: 390px) {
  body:not(.kiosk-mode) .top-nav > .nav {
    padding-right: 82px !important;
    gap: 1px !important;
  }
  body:not(.kiosk-mode) .top-nav .nav-link span {
    font-size: 10px;
  }
  body:not(.kiosk-mode) .qo-language-trigger {
    min-width: 70px;
    padding-inline: 7px;
  }
}
/* SITEWEB V3: fixed navigation must contain BOTH icon and label.
   The previous min-height did not override legacy fixed bar heights. */
body:not(.kiosk-mode) .top-nav {
  height: 96px !important;
  min-height: 96px !important;
  overflow: visible !important;
}
body:not(.kiosk-mode) .top-nav > .nav {
  height: 96px !important;
  min-height: 96px !important;
  padding-top: 16px !important;
  padding-bottom: 14px !important;
  box-sizing: border-box !important;
}
body:not(.kiosk-mode) .top-nav .nav-link {
  height: auto !important;
  min-height: 62px !important;
  box-sizing: border-box !important;
}
body:not(.kiosk-mode) .restaurant-header {
  top: 96px !important;
}
body:not(.kiosk-mode) .qo-language-picker { top: 24px !important; }
@media (min-width: 992px) {
  /* Legacy sidebar started at 128px and was covering the restaurant context.
     Preserve its own logo and leave room for the taller navigation/header. */
  body:not(.kiosk-mode) .categories-sidebar {
    top: 220px !important;
    height: calc(100vh - 340px) !important;
  }
}
@media (max-width: 850px) {
  body:not(.kiosk-mode) .top-nav {
    height: 108px !important;
    min-height: 108px !important;
  }
  body:not(.kiosk-mode) .top-nav > .nav {
    height: 108px !important;
    min-height: 108px !important;
    padding: 22px 88px 12px 4px !important;
    align-items: center !important;
  }
  body:not(.kiosk-mode) .top-nav .nav-link {
    min-height: 72px !important;
    padding: 6px 2px !important;
    overflow: visible !important;
    gap: 6px !important;
  }
  body:not(.kiosk-mode) .top-nav .nav-link span {
    display: block;
    font-size: 11px !important;
    line-height: 1.15 !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
  }
  body:not(.kiosk-mode) .restaurant-header {
    top: 108px !important;
  }
  body:not(.kiosk-mode) .qo-language-picker { top: 34px !important; }
}