/* Good Group popup surfaces and motion. Existing forms keep their own layout. */
:root {
  --gg-popup-radius: 18px;
  --gg-popup-shadow: 0 24px 64px rgb(8 24 64 / 22%);
  --gg-popup-shade: rgb(9 23 52 / 48%);
  --gg-popup-duration: 200ms;
  --gg-popup-ease: cubic-bezier(.2, .75, .25, 1);
}

dialog[data-gg-popup="center"] {
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity var(--gg-popup-duration) var(--gg-popup-ease),
    transform var(--gg-popup-duration) var(--gg-popup-ease),
    display var(--gg-popup-duration) allow-discrete, overlay var(--gg-popup-duration) allow-discrete;
}
dialog[data-gg-popup="center"][open] { opacity: 1; transform: none; }
dialog[data-gg-popup="center"]:not([open]) { pointer-events: none; }
dialog[data-gg-popup="center"]::backdrop {
  background: var(--gg-popup-shade);
  opacity: 0;
  transition: opacity var(--gg-popup-duration) ease,
    display var(--gg-popup-duration) allow-discrete, overlay var(--gg-popup-duration) allow-discrete;
}
dialog[data-gg-popup="center"][open]::backdrop { opacity: 1; }

[data-gg-popup="overlay"] { background: var(--gg-popup-shade); }
:is([data-gg-popup="overlay"], [data-gg-popup="frame"]) {
  transition: opacity var(--gg-popup-duration) ease, display var(--gg-popup-duration) allow-discrete;
}
:is([data-gg-popup="overlay"], [data-gg-popup="frame"]):is(.hidden, [hidden]) { opacity: 0; pointer-events: none; }
[data-gg-popup-panel] {
  border-radius: var(--gg-popup-radius);
  box-shadow: var(--gg-popup-shadow);
}
[data-gg-popup="overlay"] > [data-gg-popup-panel] {
  transition: transform var(--gg-popup-duration) var(--gg-popup-ease);
}
[data-gg-popup="overlay"]:is(.hidden, [hidden]) > [data-gg-popup-panel] { transform: translateY(8px) scale(.985); }

@starting-style {
  dialog[data-gg-popup="center"][open] { opacity: 0; transform: translateY(8px) scale(.985); }
  dialog[data-gg-popup="center"][open]::backdrop { opacity: 0; }
  :is([data-gg-popup="overlay"], [data-gg-popup="frame"]):not(.hidden, [hidden]) { opacity: 0; }
  [data-gg-popup="overlay"]:not(.hidden, [hidden]) > [data-gg-popup-panel] { transform: translateY(8px) scale(.985); }
}

html .pd-ov, html .sk-dr-ov, html .lk-ov, html .ov#drawer { background: var(--gg-popup-shade); }
html .pd-ov > *, html .hp-bubble { border-radius: var(--gg-popup-radius); box-shadow: var(--gg-popup-shadow); }
html .sk-dr-ov .sk-dr, html .lk-ov .sk-dr, html .ov#drawer .dr { box-shadow: var(--gg-popup-shadow); }
html [data-gg-closing] { pointer-events: none; animation: gg-popup-out var(--gg-popup-duration) ease both; }
html [data-gg-closing].pd-ov > * { animation: gg-popup-card-out var(--gg-popup-duration) var(--gg-popup-ease) both; }
html [data-gg-closing].sk-dr-ov .sk-dr, html [data-gg-closing] .dr { animation: gg-popup-drawer-out var(--gg-popup-duration) var(--gg-popup-ease) both; }
@keyframes gg-popup-out { to { opacity: 0; } }
@keyframes gg-popup-card-out { to { transform: translateY(8px) scale(.985); } }
@keyframes gg-popup-drawer-out { to { transform: translateX(32px); } }
.pz-help-drawer::backdrop, .pt-modal::before, #cs-item-history::backdrop { background: var(--gg-popup-shade); }
#bookingModal.booking-reference { background: var(--gg-popup-shade); }
#bookingModal .br-shell { box-shadow: var(--gg-popup-shadow); }
html #customerDrawer, html #jobModalPanel, html #detailDrawer { box-shadow: var(--gg-popup-shadow); }

dialog.gf-message {
  box-sizing: border-box;
  width: min(460px, calc(100% - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--gf-line, #e4e9f2);
  border-radius: var(--gg-popup-radius);
  background: #fff;
  box-shadow: var(--gg-popup-shadow);
  color: var(--gf-ink, #101828);
  font: 16px/1.55 var(--gf-font, system-ui, sans-serif);
  text-align: start;
  overflow-wrap: anywhere;
}
.gf-message .gf-message-card {
  display: grid;
  gap: 10px;
  padding: clamp(16px, 5vw, 26px);
  margin: 0;
}
.gf-message .gf-message-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--gf-navy, #0b2a86);
  background: var(--gf-tint, #eef3fd);
  font-size: 21px;
  font-weight: 600;
}
.gf-message[data-tone="danger"] .gf-message-icon { color: #a5212e; background: #fdecec; }
.gf-message[data-tone="warning"] .gf-message-icon { color: #854a00; background: #fff4dd; }
.gf-message[data-tone="success"] .gf-message-icon { color: #166534; background: #e9f7ed; }
.gf-message h2#gf-message-title { margin: 0; color: inherit; font-size: clamp(20px, 4vw, 24px); line-height: 1.35; }
.gf-message p#gf-message-body { margin: 0; color: var(--gf-ink-soft, #475467); font: inherit; white-space: pre-line; }
.gf-message p#gf-message-body:empty, .gf-message [hidden] { display: none; }
.gf-message .gf-message-field { display: grid; gap: 4px; min-width: 0; }
.gf-message .gf-message-field[hidden] { display: none; }
.gf-message .gf-message-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--gf-line-strong, #cdd6e6);
  border-radius: 10px;
  color: inherit;
  background: #fff;
  font: inherit;
}
.gf-message .gf-message-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.gf-message .gf-message-actions button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--gf-line-strong, #cdd6e6);
  border-radius: 10px;
  background: #fff;
  color: var(--gf-navy, #0b2a86);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.gf-message .gf-message-actions button:hover { background: var(--gf-tint, #eef3fd); }
.gf-message .gf-message-actions .gf-message-primary { border-color: transparent; background: var(--gf-navy, #0b2a86); color: #fff; }
.gf-message .gf-message-actions .gf-message-primary:hover { background: var(--gf-navy-700, #081f66); }
.gf-message[data-action="danger"] .gf-message-actions .gf-message-primary { background: #a5212e; }
.gf-message[data-action="danger"] .gf-message-actions .gf-message-primary:hover { background: #841b26; }
.gf-message :is(button, input):focus-visible { outline: 2px solid var(--gf-blue, #2553c9); outline-offset: 2px; }

@media (max-width: 480px) {
  .gf-message .gf-message-actions button { flex: 1 1 42%; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --gg-popup-duration: 0ms; }
}
@media print { dialog.gf-message { display: none !important; } }