/* CALL-002 — guest "call the waiter" FAB + bottom sheet.
   Bottom-left so it never collides with the bottom-right "Λίστα" FAB / return-top. */

.service-call__fab {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: #e0115f;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(224, 17, 95, 0.38);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.service-call__fab:hover { transform: translateY(-1px); }
.service-call__fab:active { transform: translateY(0); }
.service-call__fab-icon { font-size: 1.15rem; line-height: 1; }
.service-call.is-open .service-call__fab { opacity: 0; pointer-events: none; }

.service-call__sheet {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(17, 17, 17, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* The `hidden` attribute must win over the display:flex above, otherwise the
   sheet stays permanently open and the × / backdrop can't dismiss it. */
.service-call__sheet[hidden] {
  display: none;
}

.service-call__panel {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  animation: service-call-rise 0.22s ease;
}
@keyframes service-call-rise {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .service-call__panel { animation: none; }
}

.service-call__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.service-call__title { margin: 0; font-size: 1.2rem; font-weight: 800; color: #111; }
.service-call__close {
  border: none;
  background: #f1f1f3;
  color: #333;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.service-call__table {
  margin: 0 0 12px;
  font-weight: 700;
  color: #0a7d33;
}
.service-call__manual { display: block; margin-bottom: 14px; }
.service-call__manual span {
  display: block;
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 6px;
}
.service-call__manual input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d6d6db;
  border-radius: 12px;
  font: inherit;
}

.service-call__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* FIND-R4-30: like the sheet above, the explicit display rules would beat the
   `hidden` attribute — the post-send state hides options/manual/table-line and
   now stays open (no auto-close), so these must actually disappear. */
.service-call__options[hidden],
.service-call__manual[hidden],
.service-call__table[hidden] {
  display: none;
}
.service-call__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1px solid #ececef;
  border-radius: 16px;
  background: #fafafb;
  color: #111;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.1s ease;
}
.service-call__option:hover { border-color: #e0115f; background: #fff0f5; }
.service-call__option:active { transform: scale(0.97); }
.service-call__option:disabled { opacity: 0.5; pointer-events: none; }
.service-call__option-icon { font-size: 1.6rem; line-height: 1; }

.service-call__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.service-call__status {
  margin: 16px 0 0;
  text-align: center;
  font-weight: 700;
}
.service-call__status.is-ok { color: #0a7d33; }
.service-call__status.is-error { color: #c0211f; }
.service-call__status.is-pending { color: #555; }

/* FIND-R4-30: persistent receipt line — "call sent 14:32 · seen ✓". */
.service-call__receipt {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}
.service-call__receipt.is-seen { color: #0a7d33; }

/* Dark mode (FIND-R4-08). data-theme-mode only ever holds auto|light|dark —
   never "night" — so the old [data-theme-mode="night"] hooks were dead. The
   live dark state is on the .menu-page article that wraps this widget:
   data-menu-palette="night" (native night palette, or flipped there by
   theme-auto.js) plus data-theme-active="dark" when auto-dark kicks in. */
[data-menu-palette="night"] .service-call__panel,
[data-theme-active="dark"] .service-call__panel { background: #1c1c1e; }
[data-menu-palette="night"] .service-call__title,
[data-theme-active="dark"] .service-call__title { color: #fff; }
[data-menu-palette="night"] .service-call__option,
[data-theme-active="dark"] .service-call__option {
  background: #2a2a2d; border-color: #38383b; color: #f2f2f2;
}
[data-menu-palette="night"] .service-call__close,
[data-theme-active="dark"] .service-call__close { background: #2a2a2d; color: #eee; }
[data-menu-palette="night"] .service-call__manual span,
[data-theme-active="dark"] .service-call__manual span { color: #b9b9be; }
[data-menu-palette="night"] .service-call__manual input,
[data-theme-active="dark"] .service-call__manual input {
  background: #2a2a2d; border-color: #47474b; color: #f2f2f2;
}
[data-menu-palette="night"] .service-call__status.is-pending,
[data-theme-active="dark"] .service-call__status.is-pending { color: #b9b9be; }
[data-menu-palette="night"] .service-call__status.is-ok,
[data-theme-active="dark"] .service-call__status.is-ok { color: #5fce8b; }
[data-menu-palette="night"] .service-call__status.is-error,
[data-theme-active="dark"] .service-call__status.is-error { color: #ff7b73; }
[data-menu-palette="night"] .service-call__table,
[data-theme-active="dark"] .service-call__table { color: #5fce8b; }
[data-menu-palette="night"] .service-call__receipt,
[data-theme-active="dark"] .service-call__receipt { color: #b9b9be; }
[data-menu-palette="night"] .service-call__receipt.is-seen,
[data-theme-active="dark"] .service-call__receipt.is-seen { color: #5fce8b; }