/* Booking Details popup: keep the Cleaner-tab Save action visible while the
   popup body scrolls. This intentionally targets only the modal dialog; the
   embedded desktop Booking Details panel keeps its existing layout. */

div[role="dialog"][aria-label="Booking Details"] .booking-details-scroll {
  padding-bottom: 96px !important;
}

div[role="dialog"][aria-label="Booking Details"] .booking-details-note-save-row {
  position: fixed;
  left: 50%;
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 12px));
  transform: translateX(-50%);
  z-index: 145;
  width: min(700px, calc(100vw - 40px));
  box-sizing: border-box;
  margin: 0 !important;
  padding: 9px 10px 10px;
  border-top: 1px solid rgba(22, 101, 52, 0.26);
  border-radius: 0 0 18px 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 253, 248, 0.97),
    rgba(243, 246, 249, 0.995)
  );
  box-shadow: 0 -10px 24px rgba(4, 10, 18, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

div[role="dialog"][aria-label="Booking Details"] .booking-details-note-save-row .btn {
  width: 100%;
  min-height: 42px;
  background: linear-gradient(180deg, #22a447, #16823a) !important;
  border-color: rgba(20, 83, 45, 0.38) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(22, 130, 58, 0.24) !important;
}

div[role="dialog"][aria-label="Booking Details"] .booking-details-note-save-row .btn:disabled {
  background: linear-gradient(180deg, #69b77f, #4b9762) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  opacity: 0.82;
}

/* The existing save handler sets detailMsg to "Saved." only after the save
   succeeds. Surface that real confirmation next to the locked Save action so
   it cannot be missed even when the rest of the card has scrolled away. */
div[role="dialog"][aria-label="Booking Details"] .booking-details-scroll .detailCard > .hint:last-child {
  position: fixed;
  left: 50%;
  bottom: max(61px, calc(env(safe-area-inset-bottom) + 61px));
  transform: translateX(-50%);
  z-index: 146;
  width: min(680px, calc(100vw - 60px));
  box-sizing: border-box;
  margin: 0 !important;
  padding: 5px 10px 6px;
  border-radius: 999px;
  background: rgba(236, 253, 245, 0.98);
  border: 1px solid rgba(22, 163, 74, 0.24);
  color: #166534 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center;
  box-shadow: 0 4px 12px rgba(22, 101, 52, 0.10);
  pointer-events: none;
}

div[role="dialog"][aria-label="Booking Details"] .booking-details-scroll .detailCard > .hint:last-child::before {
  content: "✓ ";
}

@media (max-width: 520px) {
  div[role="dialog"][aria-label="Booking Details"] .booking-details-scroll {
    padding-bottom: 100px !important;
  }

  div[role="dialog"][aria-label="Booking Details"] .booking-details-note-save-row {
    width: calc(100vw - 40px);
  }

  div[role="dialog"][aria-label="Booking Details"] .booking-details-scroll .detailCard > .hint:last-child {
    width: calc(100vw - 60px);
  }
}