/* ============================================================
   DEFAULT MODAL STYLES (temporary, will be replaced by designer)
   Covers wo-modal-block.hb-modal-map (choose-location modal)
   and the generic wo-modal-block used on pj pages.
   Uses design tokens from 2_0/styles.css.
   ============================================================ */

/* ---------- Backdrop ---------- */
.wo-modal-block .wo-modal-background {
  background: rgba(46, 50, 51, 0.5);
}

/* ---------- Modal card ---------- */
.wo-modal-block .wo-modal-body {
  background: var(--background-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 32px;
  box-shadow: var(--shadow-bar);
  padding: 24px;
}

/* ---------- Close button ---------- */
.wo-modal-block .wo-modal-body .wo-modal-close {
  position: absolute;
  top: 0;
  left: calc(100% + 18px);
  right: auto;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: var(--background-color);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.wo-modal-block .wo-modal-body .wo-modal-close span {
  display: none;
}
.wo-modal-block .wo-modal-body .wo-modal-close:before,
.wo-modal-block .wo-modal-body .wo-modal-close:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--background-text-color);
}
.wo-modal-block .wo-modal-body .wo-modal-close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.wo-modal-block .wo-modal-body .wo-modal-close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.wo-modal-block .wo-modal-body .wo-modal-close:hover {
  background: var(--card-color);
}

/* ============================================================
   CHOOSE-LOCATION MODAL (hb-modal-map)
   ============================================================ */
#hb_menu_page .hb-modal-map .wo-modal-body {
  max-width: 1080px;
  width: 100%;
  max-height: 90vh;
  height: 680px;
  padding: 0;
  display: flex;
  border-radius: 32px;
  overflow: visible;
}
#hb_menu_page .hb-modal-map .wo-modal-body .wo-modal-close {
  top: 0;
  right: auto;
  left: calc(100% + 18px);
  background: none;
  box-shadow: none;
}
#hb_menu_page .hb-modal-map .wo-modal-body .wo-modal-close:hover {
  background: none;
}

/* left column — choice list */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container {
  width: 43%;
  height: 100%;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  border-top-left-radius: 32px;
  border-bottom-left-radius: 32px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .choice-grid-row-1 {
  overflow: hidden;
  flex-shrink: 0;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .choice-grid-row-2 {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .choice-grid-row-3 {
  flex-shrink: 0;
}

/* right column — map */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-map-container {
  width: 57%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-map-block {
  height: 100%;
  width: 100%;
}

/* ---------- titles ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-title {
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--background-text-color) !important;
  padding-bottom: 16px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-title2 {
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color) !important;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem .hb-title2,
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-elem .hb-title2 {
  color: var(--background-text-color) !important;
}

/* ---------- type switch ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-switch-block {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-switch-block .col {
  padding: 0;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-switch-block .col:nth-child(1) {
  order: 2;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-switch-block .col:nth-child(2) {
  order: 1;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-switch-block button {
  outline: none;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  background: var(--card-color);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 4px 16px;
  transition: border-color 0.15s, background 0.15s;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-switch-block button svg {
  height: 18px;
  width: 18px;
  fill: var(--background-text-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-switch-block button.deactive {
  pointer-events: none;
  border-color: var(--accent-color);
  background: none;
}

/* ---------- search / filter ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-input {
  position: relative;
  margin-bottom: 12px;
  padding-right: 0;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-input input {
  outline: none;
  width: 100%;
  height: 48px;
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: var(--radius-md);
  background: var(--card-color);
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  padding: 0 40px 0 16px;
  transition: border-color 0.15s;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-input input:focus {
  border-color: var(--accent-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-input p {
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 16px;
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
  color: var(--secondary-background-text-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-input .hb-filter-clear {
  position: absolute;
  height: 48px;
  width: 40px;
  top: 0;
  right: 0;
  cursor: pointer;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-input .hb-filter-clear:before,
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-input .hb-filter-clear:after {
  content: '';
  position: absolute;
  width: 1.5px;
  height: 14px;
  background: var(--secondary-background-text-color);
  left: 50%;
  top: 50%;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-input .hb-filter-clear:before {
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(-45deg);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-input .hb-filter-clear:after {
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* mobile search */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-search {
  display: none;
}

/* ---------- outlet list ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-title {
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--secondary-background-text-color);
  padding-bottom: 12px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem {
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 8px;
  margin-right: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem:hover {
  background: var(--card-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem.active {
  border-width: 2px;
  padding: 13px;
  border-color: var(--accent-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem .hb-outlet-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem .hb-outlet-head img {
  height: 24px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem .hb-outlet-data {
  font-family: var(--custom-app-font-reg);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  padding-bottom: 6px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem .hb-outlet-data svg {
  height: 16px;
  width: 16px;
  fill: var(--accent-color);
  position: relative;
  top: 2px;
  margin-right: 2px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem .hb-outlet-time {
  font-family: var(--custom-app-font-reg);
  font-size: 14px;
  line-height: 20px;
  color: var(--secondary-background-text-color);
  padding-bottom: 6px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem .hb-outlet-closed {
  font-family: var(--custom-app-font-reg);
  font-size: 14px;
  line-height: 20px;
  color: var(--error-color);
  padding-bottom: 6px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .hb-outlet-elem .hb-outlet-closed.hb-order-warning {
  background-color: var(--alert-color);
  color: var(--alert-text-color);
  border-radius: var(--radius-md);
  padding: 12px;
  line-height: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container .hb-outlet-list .baron__track {
  background: none;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-map-row .baron__scroller {
  overflow-x: hidden;
}

/* ---------- errors ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .wo-modal-error {
  font-family: var(--custom-app-font-reg);
  font-size: 14px;
  line-height: 18px;
  color: var(--error-color);
  padding-bottom: 12px;
}

/* ---------- current outlet / pickup start ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current {
  padding-top: 0;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-menu-elem {
  position: absolute;
  top: 0;
  right: 15px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-outlet-alert p {
  padding: 10px 0 0;
  color: var(--error-color);
  font-size: 14px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-outlet-alert.visible {
  height: 31px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-title2 {
  font-size: 16px;
  line-height: 20px;
  padding-bottom: 8px;
  color: var(--secondary-background-text-color);
}

/* ---------- previous addresses ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-previous {
  padding-bottom: 18px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-previous .hb-previous-list {
  overflow: auto;
  margin-bottom: 36px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-previous .hb-previous-address {
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: var(--radius-md);
  padding: 14px 19px 14px 45px;
  position: relative;
  margin-bottom: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-previous .hb-previous-address:hover {
  background: var(--card-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-previous .hb-previous-address img {
  pointer-events: none;
  position: absolute;
  height: 26px;
  left: 12px;
  top: 12px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-previous .hb-previous-address p {
  pointer-events: none;
  font-family: var(--custom-app-font-reg);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--background-text-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-previous .hb-previous-address:last-child {
  margin-bottom: 0;
}

/* ---------- location block ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-block {
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: var(--radius-md);
  background: var(--card-color);
  padding: 13px 12px;
  position: relative;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-block .wo-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-block .wo-close:before,
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-block .wo-close:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--background-text-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-block .wo-close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-block .wo-close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-block .hb-location-title {
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.4px;
  padding-right: 35px;
  color: var(--background-text-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-block .hb-location-desc {
  padding-top: 8px;
  font-family: var(--custom-app-font-reg);
  font-size: 14px;
  line-height: 20px;
  color: var(--secondary-background-text-color);
}

/* ---------- location input ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-input {
  position: relative;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--quarternary-background-text-color);
  background: var(--card-color);
  padding: 0;
  transition: border-color 0.15s;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-input:focus-within {
  border-color: var(--accent-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-input .hb-outlet-text {
  pointer-events: none;
  position: absolute;
  transform: translate(0, -50%);
  opacity: 0.5;
  top: 50%;
  left: 16px;
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-input p {
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-input input {
  padding: 12px 16px;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: inherit;
  outline: none;
  background: transparent;
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  color: var(--background-text-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-input button {
  outline: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 45px;
  background: none;
  border: none;
  border-left: 1px solid var(--quarternary-background-text-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-input button svg {
  fill: var(--accent-color);
  height: 19px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-input .hb-location-variants {
  z-index: 5;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--background-color);
  border: solid 1px var(--quarternary-background-text-color);
  border-radius: var(--radius-md);
  width: 100%;
  box-shadow: var(--shadow-md);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-input .hb-location-variants div {
  padding: 12px 16px;
  cursor: pointer;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-outlet-current .hb-location-input .hb-location-variants div:hover {
  background: var(--card-color);
}

/* ---------- locate button ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-location-btn {
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: var(--radius-md);
  color: var(--background-text-color);
  font-family: var(--custom-app-font-reg);
  font-size: 14px;
  line-height: 18px;
  margin-top: 12px;
  text-align: left;
  padding: 10px 16px;
  transition: background 0.15s;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-location-btn:hover {
  background: var(--chip-selected-color);
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-location-btn svg {
  height: 18px;
  width: 18px;
  fill: var(--accent-color);
}

/* ---------- brands ---------- */
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-brands {
  position: absolute;
  right: 12px;
  top: 15px;
  width: calc(100% - 24px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  overflow: auto;
  margin-bottom: 10px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-brands .hb-brand-button {
  width: auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 4px;
  padding: 8px 12px;
  font-family: var(--custom-app-font-reg);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  margin-bottom: 10px;
  background: var(--background-color);
  border: solid 1px var(--quarternary-background-text-color);
  border-radius: var(--radius-pill);
  color: var(--background-text-color);
  cursor: pointer;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-brands .hb-brand-button img {
  height: 24px;
  width: auto;
  margin-right: 10px;
}
#hb_menu_page .hb-modal-map .wo-modal-body .hb-filter-brands .hb-brand-button.active {
  border: solid 2px var(--accent-color);
  padding: 7px 11px;
}

/* ============================================================
   ACTION BUTTONS (primary / back) — design tokens
   ============================================================ */
.wo-modal-block .wo-modal-body .hb-button-company1,
.wo-modal-block .wo-modal-body .hb-button-back {
  font-family: var(--custom-button-font);
  font-weight: 900;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
  padding: 14px 24px;
  transition: background 0.15s, color 0.15s;
}
.wo-modal-block .wo-modal-body .hb-button-company1 {
  background: var(--accent-color) !important;
  border: 1px solid var(--accent-color) !important;
  color: var(--accent-text-color) !important;
}
.wo-modal-block .wo-modal-body .hb-button-company1:hover,
.wo-modal-block .wo-modal-body .hb-button-company1.active {
  background: var(--accent-color-hover) !important;
  border-color: var(--accent-color-hover) !important;
}
.wo-modal-block .wo-modal-body .hb-button-company1.disabled {
  background: var(--quarternary-background-text-color) !important;
  border-color: var(--quarternary-background-text-color) !important;
  color: var(--tertiary-background-text-color) !important;
  pointer-events: none;
}
.wo-modal-block .wo-modal-body .hb-button-back {
  background: var(--card-color) !important;
  border: 1px solid var(--quarternary-background-text-color) !important;
  color: var(--background-text-color) !important;
}
.wo-modal-block .wo-modal-body .hb-button-back:hover,
.wo-modal-block .wo-modal-body .hb-button-back.active {
  background: var(--chip-selected-color) !important;
}
.wo-modal-block .wo-modal-body .hb-button-back.disabled {
  color: var(--tertiary-background-text-color) !important;
  pointer-events: none;
}
.wo-modal-block .wo-modal-body .wo-modal-control {
  padding-top: 16px;
}
.wo-modal-block .wo-modal-body .wo-modal-control button {
  width: 100%;
}

/* ============================================================
   MODAL-WINDOW — the generic message dialog (title + text + Ok / Cancel)
   Component: public/js/component/ModalWindow.js. It is the same instance
   everywhere (open_modal), so it gets ONE place for its styles — it can
   appear on any 2_0 page. None of its classes are drawn by the batch:
     .hb-modal-title, .hb-modal-content — no rule anywhere in 2_0
     .row / .col-12 .col-md-6 — bootstrap, and bootstrap is NOT linked on a
       2_0 page (index.ejs links it under !design2_page), so the button row
       is not a row and the columns are not columns
   The .wo-modal-block base (fixed overlay + centred card) only exists in the
   1_0 sheets (public/css/standard/*.css), which a 2_0 page does not link, so
   it is rebuilt here as well.
   Scoped to .wo-modal-message — the class the component puts on the block —
   so the 1_0 outlets map modal (.wo-modal-block.hb-modal-map, positioned by
   pj_style/menu.css on menu_2) keeps its own layout.
   ============================================================ */
.wo-modal-block.wo-modal-message {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.wo-modal-message .wo-modal-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}
.wo-modal-message .wo-modal-body {
  position: relative;
  /* Legacy pj_style/menu.css also matches .wo-modal-block .wo-modal-body and
     centres its card with position:fixed + top/left:50% + translate(-50%,-50%)
     + min-width:700px. Same specificity, but that sheet is linked FIRST
     (index.ejs:48-50, before the 2_0 sheets at :87), so every property we do
     not declare here survives:
       - the three centring declarations stop centring once position is
         relative and become a plain offset -> the card slid +274px right and
         +167px down, i.e. flush against the right edge of the viewport at ANY
         width (x = viewport - 716);
       - min-width:700px beats max-width:420px below (in CSS min-width wins
         over max-width), so the designed 420px card was impossible.
     Together that pushed our own .wo-modal-close (left: calc(100% + 18px),
     below) past the right edge: the close button was off-screen on every 2_0
     page. Reset all four. See
     knowledge/design2_popup_close_button_2026-09-25.md */
  top: auto;
  left: auto;
  transform: none;
  min-width: 0;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 32px 24px 24px;
  text-align: center;
}
.wo-modal-message .hb-modal-title {
  margin: 0 0 8px;
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 20px;
  line-height: 26px;
  color: var(--background-text-color);
}
.wo-modal-message .hb-modal-content {
  font-size: 15px;
  line-height: 22px;
  color: var(--secondary-background-text-color);
}
.wo-modal-message .hb-modal-content p {
  margin: 0 0 8px;
}
.wo-modal-message .hb-modal-content p:last-child {
  margin-bottom: 0;
}
/* bootstrap is not loaded on 2_0, so the grid classes are plain divs —
   the row is rebuilt as a flex pair here */
.wo-modal-message .wo-modal-control {
  display: flex;
  gap: 12px;
  padding-top: 24px;
}
.wo-modal-message .wo-modal-control > div {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 820px) {
  .wo-modal-message .wo-modal-control {
    flex-direction: column;
  }
  /* the close button sits OUTSIDE the card on desktop (left: 100% + 18px) —
     on a narrow screen that would push it off the viewport */
  .wo-modal-message .wo-modal-body .wo-modal-close {
    top: 16px;
    right: 16px;
    left: auto;
    background: none;
  }
}

/* ============================================================
   MOBILE — bottom sheet like signin-modal
   ============================================================ */
@media (max-width: 820px) {
  .wo-modal-block .wo-modal-background {
    background: rgba(46, 50, 51, 0.5);
  }
  #hb_menu_page .hb-modal-map .wo-modal-body {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100vw;
    height: 92vh;
    max-height: 92vh;
    border-radius: 38px 38px 0 0;
    flex-direction: column;
    padding: 0;
  }
  #hb_menu_page .hb-modal-map .wo-modal-body .wo-modal-close {
    top: 16px;
    right: 16px;
    left: auto;
    background: none;
  }
  #hb_menu_page .hb-modal-map .wo-modal-body .hb-choice-container {
    width: 100%;
    height: auto;
    max-height: 55%;
    padding: 64px 16px 16px;
  }
  #hb_menu_page .hb-modal-map .wo-modal-body .hb-map-container {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    order: -1;
    border-radius: 0;
  }
  #hb_menu_page .hb-modal-map .wo-modal-body .hb-map-block {
    height: 100%;
  }
  #hb_menu_page .hb-modal-map .wo-modal-body .hb-map-container .wo-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ============================================================
   DESIGN 2_0 — STICKY FOOTER (menu_2 / ordering_2 / profile_2)
   ------------------------------------------------------------
   His own mechanism, it is already in public/css/2_0/styles.css:

     body.page-profile { display:flex; flex-direction:column;
                         min-height:100vh; padding-bottom:0 }
     body.page-profile .app { flex:1 0 auto; width:100%; padding-top:32px }

   with the comment "Account pages are short — keep the footer at the bottom of
   the viewport instead of letting it ride up under the content".

   It never fires for us: his page class is on <body> (profile.html:10) and ours
   is on <main>, because one <body> is shared by every page (views/index.ejs:156)
   — so profile_2.ejs:14 carries page-profile on <main> instead. That <main>
   holds the same three children his <body> does (header / content / footer), so
   the rule is re-mapped onto it: same mechanism, same values, only the root
   moved. Extended to menu and checkout (Vadim) — the batch pins profile only.
   ============================================================ */
/* :not([v-cloak]) is load-bearing. An id is (1,0,0) and [v-cloak] is (0,1,0),
   so this rule used to beat `/css/style.css` `[v-cloak] { display: none }` —
   the page root stayed display:flex while the template was still un-compiled,
   and the whole markup flashed: every modal stacked, no text, raw {{ }}.
   Skipping the rule while v-cloak is on lets the cloak actually hide the page
   (NEW_DESIGN_BUGS.md #32). */
#hb_menu_page:not([v-cloak]),                 /* menu_2     — the menu page has no page class in the batch (menu.html:10 = <body data-page="menu">) */
#hb_ordering_page:not([v-cloak]),             /* ordering_2 — .page-checkout */
#hb_profile_page:not([v-cloak]) {             /* profile_2  — .page-profile */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#hb_menu_page > .app,
#hb_ordering_page > .checkout, /* the checkout content box is .checkout, not .app (checkout.html:68) */
#hb_profile_page > .app {
  flex: 1 0 auto;
  width: 100%;                 /* his own line: the grid's auto margins would otherwise shrink-wrap it as a flex item */
}

/* NO bottom reserve on any page. An earlier designer batch reserved 120px under
   the footer for the floating cart pill (`body { padding-bottom: 120px }` — see
   styles_1808back.css:156 / styles_1109cml_back.css:180 in this folder); we
   neutralised it and moved the reserve onto the menu page only. The current
   styles.css dropped it on purpose — :195 "No bottom padding here: the footer is
   the last block on every page and the floating cart pill overlaps it
   (Figma 28078:14520), so any body padding would just show as a white strip
   under the footer at the end of the scroll" — and the pill is a fixed corner
   element (`.floating-bar { position: fixed; bottom: 40px; right: var(--page-pad) }`,
   styles.css:1132), so nothing needs the room. Keeping ours produced exactly that
   strip: 120px of page background below the dark footer on every menu_2 page
   (measured 2026-09-25 on woru.kit-gr.com and locally, desktop + mobile, sole
   owner of the 120px was #hb_menu_page here). Do not re-add a reserve — if a
   future batch brings one back, that is the designer's call, not ours. */


/* .page-checkout .site-footer { margin-bottom: 92px } is his room for a fixed
   bottom bar — the mobile .checkout reserves 120px for the same one
   (2_0/styles.css). Our ordering_2 has no bottom bar, so that is 92px of dead
   space below the footer. Put it back when the bar is ported. */
.page-checkout .site-footer {
  margin-bottom: 0;
}

/* DESIGN 2_0: user-ID copy icons (account modal, menu modal, profile sidebar).
   The icon is the whole click target and the batch sets the cursor from JS
   (script.js:889 "icon.style.cursor = char pointer"); we set it in CSS so the
   pointer is right before the first click. The click itself is Vue —
   `@click.stop="copy_user_id()"` (design2_toast_mixin.js). Pointer affordance
   only — no layout change. */
.account-modal__copy,
.menu-modal__acc-copy,
.profile-nav__copy {
  cursor: pointer;
}

/* DESIGN 2_0: the delivery-service cards (the aggregator screen, Figma
   32044:17003 / 32048:17404). The designer's `.deliver-services__row` has no
   `flex-wrap` and `.deliver-service` is `flex: 1 1 0`, so with more than two
   services (DoorDash, Postmates …) all of them squeeze into ONE row instead of
   wrapping. Vadim, 2026-10-04: on mobile, "if there are many links they do not
   fit in one row, they must wrap to the next line — like in design 1".
   His own gap is 12px, so 2 per row = `50% - 6px`; 1_0 wraps exactly this way
   with `flex: 1 0 calc(50% - 6px)` on `.hb-outer-suggest-service`
   (public/css/standard/pj_style/menu.css:5264). A lone card still grows to fill
   the row, just like his `flex: 1 1 0` does for one item.
   The descendant selector on the second rule is load-bearing, not style: this
   file is linked at index.ejs:87, but the designer's own copy of `.deliver-service`
   ALSO ships inside the site CSS (site 53 `site.css`, printed inline at
   index.ejs:104-106 — AFTER us), so at equal specificity his `flex: 1 1 0` wins
   on source order and the row never wraps. `(0,2,0)` beats his `(0,1,0)` whatever
   the order. `flex-wrap` needs no bump — he never declares it.
   We add only this — his colours, radius, padding and typography stay untouched.
   Delete when his sheet ships the wrap. */
.deliver-services__row {
  flex-wrap: wrap;
}
.deliver-services__row .deliver-service {
  flex: 1 1 calc(50% - 6px);
}

/* DESIGN 2_0: the same request one level up — the aggregator badges on an
   outlet CARD (Figma 30265:24672). 1_0 wraps them too (`flex-wrap: wrap` on
   `.hb-outlet-outer-services`, public/css/standard/pj_style/menu.css:4808-4813);
   the designer's `.event-card__available-logos` (2_0/styles.css:5402, and the
   site's own copy in `site.css`) is a plain flex row, while our anchors are
   `flex-shrink: 0` (menu_addons.css:504) — so a store listed on five services
   runs off the card instead of breaking the line. No specificity bump needed:
   he never declares `flex-wrap`, so there is nothing to outrank. */
.event-card__available-logos {
  flex-wrap: wrap;
}

/* DESIGN 2_0: the "outlet is off" line above the delivery form. The designer
   sets `margin: 0` on it — his only `.delivery__error` rules sit in the phone
   section (2_0/styles.css:9669) — and in several states his pane drops its own
   padding, so the line lands flush against the card's left edge AND against the
   map above it. Same trap the h2 already documents
   (modal_map_outlets_2.ejs:133-142). The form below keeps its rhythm from
   `.delivery { padding: 24px }` (<=1080) / `16px` (<=820), so the line gets the
   same inset. Vadim, 2026-10-04: a left+top margin is needed.
   The `>` matters: only the alert that is a DIRECT child of the pane
   (modal_map_outlets_2.ejs:194) may move — the other `.delivery__error` (:646,
   the no_data one) lives INSIDE `.delivery` and already gets that padding, so a
   margin there would double the inset.
   The pane's own padding (2_0/styles.css), state by state:
     · top-level 24px (:4991) at every width -> already inset, no margin;
     · `padding: 0` <=1080 for `.is-delivery` (:9527) — the delivery.START stage;
     · `padding: 0` <=820 for `.is-events-picked:not(.is-delivery)` (:9380);
     · `padding: 16px 16px 30px` <=820 for `.is-events-map:not(.is-delivery)`
       (:9409) -> already inset, so NOT listed (a margin would double it).
   🛑 A single `.is-delivery`-scoped rule was the 2026-10-04 BUG: the flush Vadim
   hit was the MOBILE PICKED screen, which `:not(.is-delivery)` excluded, so the
   inset never applied. Each unpadded state now gets its own rule. The line was
   hidden unconditionally for a day (2026-10-05) and RESTORED the same day
   (Vadim, 2026-10-05: bring it back on the delivery tab) — the gate is
   `outlet_off_visible` in the view, so it still only shows for a shut ACTIVE
   outlet. */
@media (max-width: 1080px) {
  .events-modal.is-delivery .events-modal__pane > .delivery__error {
    margin: 24px 24px 0;
  }
}
@media (max-width: 820px) {
  .events-modal.is-delivery .events-modal__pane > .delivery__error {
    margin: 16px 16px 0;
  }
  /* Picked screen zeroes the pane too (styles.css:9380) — the state Vadim saw
     flush. Inset matches the <=820 `.delivery { padding: 16px }`. */
  .events-modal.is-events-picked:not(.is-delivery) .events-modal__pane > .delivery__error {
    margin: 16px 16px 0;
  }
}

/* ---------- A pin whose store cannot take an online order ----------------
   The designer dims the marker of a store whose ordering has not opened yet:
   `.events-modal__pin.is-off { opacity: .5 }` (2_0/styles.css:5458, his own
   comment "state=false — a stop whose ordering hasn't opened yet"). His pins
   are prototype BUTTONS he can hard-code the class on; ours are built by the
   map provider, so the class has to ride on the marker ELEMENT
   (google_map.js:358 wraps our <img> in an AdvancedMarkerElement) and the rule
   has to name the map container instead of his `.events-modal__pin` /
   `.events-modal__mark`. Applied by d2_paint_outlet_pins()
   (design2_locations_mixin.js) — it also has to RE-apply it, because a new
   selection drops the placemark and builds a new one (menu.js:400).
   The value is his 0.5, not the provider's 0.6: `outlet_type === 3`
   (map.js:147) would dim the same pins but also skip
   `outlet.default_placemark` (map.js:149), which the 1_0 flows rely on.
   Deliberately NOT the same state as "closed now": the designer leaves a store
   that is only shut for a while at full opacity — his closed Waianae pin
   measures opacity 1, his ordering-off Waipahu 0.5. */
.events-modal__map .is-off {
  opacity: 0.5;
}

/* ---------- A pin whose store is not in the list -------------------------
   Vadim, 05.10: a store that is not in the list must not keep a pin — otherwise
   a tap lands on a marker with nothing to open. The rule the pin mirrors is the
   card's own v-show (modal_map_outlets_2.ejs:350) plus the two chips that drop
   cards from d2_outlets (design2_locations_mixin.js:247) — applied by
   d2_outlet_card_visible() / d2_paint_outlet_pins().
   Hidden with `visibility`, not `display`: the marker keeps its box, so the map
   provider never sees a zero-size element, and a hidden element receives no
   clicks. The class rides on `outlet.placemark.element` for the same reason
   `.is-off` does — the pin is built by the provider, not by the designer's
   markup — and it deliberately does NOT use MapModule.delete_points(): that
   module is out of scope in design2_locations_mixin.js, and menu.js
   filter_map_points() re-shows every pin of the list on its own 400 ms timer
   (menu.js:2169), which a class survives and a setMap(null) does not. */
.events-modal__map .is-pin-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- jQuery fallback modal (helper.show_modal) --------------------
   The second modal family on a 2_0 page, and the one the design never drew:
   `helper.show_modal()` (client_helper.js:646) builds `.kit-modal-block` with
   jQuery and appends it to <body>. It is what the geo errors go through —
   `find_user_place()` -> `geo.permission_denied` (map.js:320), i.e. tapping
   "Detect my location" (modal_map_outlets_2.ejs:880) with browser location
   access off — plus bad_items and the other generic confirmations.

   Until now it inherited the 1_0 look from /css/style.css:328-365, which is
   linked on 2_0 too: a fixed 500x300 card, `border: solid 2px #000`, 65px of
   empty bottom padding and a bare `<button>` 20px tall. The 1_0 refinement in
   standard/pj_style/menu.scss:159 never reaches it — that block is nested
   under `#hb_menu_page`, and the modal is appended to <body>, i.e. a SIBLING
   of that <main> (menu_2.ejs:91), so the selector cannot match on either
   design. Hence "some default popup" (Vadim, 20.10).

   Re-skinned here with the same card language as `.wo-modal-body` above and
   `.events-modal__card` (styles.css:5015): 32px radius, no border, shadow.
   This sheet is linked inside the `design2_page` block of index.ejs:90, so
   1_0 keeps the legacy box untouched. */

.kit-modal-block .kit-modal-background {
  background: rgba(46, 50, 51, 0.5);
}

.kit-modal-block .kit-modal-body {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  /* 1_0 pins the card to a 500x300 grid; a dialog should size to its text */
  min-height: 0;
  padding: 32px 32px 24px;
  border: 0;
  border-radius: 32px;
  background: var(--background-color);
  box-shadow: var(--shadow-bar);
  font-family: var(--custom-app-font-reg);
  color: var(--background-text-color);
}

.kit-modal-block .kit-modal-body p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 22px;
  color: var(--background-text-color);
}

/* 1_0 absolutely positions a 20px-tall strip at the bottom of the 300px card */
.kit-modal-block .kit-modal-body .kit-modal-btn-block {
  position: static;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--space-xs);
}

.kit-modal-block .kit-modal-body .kit-modal-btn-block button {
  height: 48px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text-color);
  font-family: var(--custom-button-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}

.kit-modal-block .kit-modal-body .kit-modal-btn-block button:hover {
  background: var(--accent-color-hover);
}

/* show_modal() appends the cancel button AFTER the ok one, so `+ button`
   is the secondary. Same fill and hover as `.btn-quiet`. */
.kit-modal-block .kit-modal-body .kit-modal-btn-block button + button {
  background: var(--quarternary-background-text-color);
  color: var(--accent-color);
}

.kit-modal-block .kit-modal-body .kit-modal-btn-block button + button:hover {
  background: var(--tertiary-background-text-color);
}