/*
 * pli-interceptor.css — modal styling.
 *
 * Layout rules:
 *  - Modal is position:fixed so opening it never triggers layout shift.
 *  - html.pli-modal-open keeps the page from scrolling behind the modal.
 *  - Uses viewport units + max-width so it stays comfortable on phones.
 */

html.pli-modal-open { overflow: hidden; }

.pli-modal[hidden] { display: none !important; }
.pli-modal {
  position: fixed; inset: 0; z-index: 2147483000;   /* above Joinchat */
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  font-family: inherit;
}
.pli-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.pli-modal__dialog {
  position: relative;
  width: 100%; max-width: 480px;
  background: #fff; color: #111827;
  border: 1px solid #e5e7eb; border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.pli-modal__panel[hidden] { display: none; }
.pli-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
}
.pli-modal__title { margin: 0; font-size: 16px; font-weight: 700; }
.pli-modal__chip {
  display: inline-block;
  background: #e0e7ff; color: #3730a3;
  border-radius: 999px; padding: 2px 10px;
  font-size: 12px; font-weight: 700;
  margin-left: 4px;
}
.pli-modal__close {
  background: transparent; border: 0; font-size: 22px; line-height: 1;
  color: #6b7280; cursor: pointer; padding: 4px 8px;
}
.pli-modal__close:hover { color: #111827; }

/* --- panel: choices --- */
.pli-modal__choices {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: 16px;
}
@media (min-width: 480px) {
  .pli-modal__choices { grid-template-columns: repeat(3, 1fr); }
}
.pli-modal__choice {
  padding: 14px 12px; border: 1px solid #d1d5db; border-radius: 10px;
  background: #f9fafb; font-weight: 700; font-size: 14px;
  cursor: pointer; text-align: center; color: #111827;
}
.pli-modal__choice:hover, .pli-modal__choice:focus-visible {
  background: #eef2ff; border-color: #6366f1; outline: none;
}
.pli-modal__choice[data-channel="online"] { border-color: #16a34a; }
.pli-modal__choice[data-channel="member"] { border-color: #2563eb; }
.pli-modal__choice[data-channel="b2b"]    { border-color: #d97706; }

/* --- panel: form --- */
.pli-modal__form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.pli-modal__field { display: flex; flex-direction: column; gap: 6px; }
.pli-modal__field label { font-size: 12px; font-weight: 600; color: #374151; }
.pli-modal__field input,
.pli-modal__field select {
  padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 14px; background: #fff; color: #111827;
}
.pli-modal__hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

.pli-modal__actions { display: flex; gap: 8px; }
.pli-modal__back {
  flex: 0 0 auto; padding: 10px 14px; border-radius: 10px;
  background: #f3f4f6; color: #111827; border: 1px solid #d1d5db;
  font-weight: 600; cursor: pointer;
}
.pli-modal__submit {
  flex: 1 1 auto; padding: 12px 14px; border-radius: 10px;
  background: #16a34a; color: #fff; border: 0;
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.pli-modal__submit:disabled { opacity: .6; cursor: not-allowed; }
.pli-modal__submit.is-loading::before {
  content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  border-radius: 50%; vertical-align: -2px; animation: pli-spin .7s linear infinite;
}
@keyframes pli-spin { to { transform: rotate(360deg); } }

.pli-modal__status { min-height: 20px; font-size: 13px; }
.pli-modal__status--loading { color: #6b7280; }
.pli-modal__status--success { color: #15803d; }
.pli-modal__status--error   { color: #b91c1c; }