/* modal.css */

/* =========================================
   Dashboard Modal (Unified)
   ========================================= */
:root {
  /* Change this to rgba(0,0,0,.45) if you want a dim backdrop instead of blue */
  --modal-overlay-bg: blue;
  --modal-content-bg: #fff;
  --modal-max-w: 800px;
  --modal-z: 9999;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-modal: 0 4px 10px rgba(0,0,0,0.2);
}

/* Shell renders with PHP helper; hidden by default */
.dashboard-modal {
  display: none; /* toggled by JS */
}

/* Fullscreen overlay */
.dashboard-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--modal-overlay-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--modal-z);
  overflow: auto;
  padding: 20px; /* enables breathing room on tiny screens */
  box-sizing: border-box;
}

/* Modal card */
.dashboard-modal-content {
  position: relative;
  background: var(--modal-content-bg);
  border-radius: var(--radius-md);
  width: 90vw;
  max-width: var(--modal-max-w);
  max-height: 95vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: var(--shadow-modal);
}

/* Close row pinned to top */
.modal-close-wrapper {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  z-index: calc(var(--modal-z) + 1);
  margin-bottom: -10px; /* keep legacy spacing */
}

/* “X” button */
.close-popup {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  color: #333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: background-color .2s ease, color .2s ease;
}
.close-popup:hover {
  background: #f0f0f0;
  color: #0073aa;
}

/* Optional absolute-positioned close used in some legacy views */
#close-success-popup {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Headings / intro rows within modal */
.modal-header,
.dashboard-modal-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: inherit;
  padding: 10px;
  z-index: calc(var(--modal-z) + 1);
}
.dashboard-modal-header h2,
.dashboard-modal-header h3 {
  text-align: center;
}

/* Text blocks used in several modals */
.dashboard-modal-lines p,
.modal-lines p {
  margin: 4px 0;
  color: #555;
  text-align: left;
  font-size: 14px;
}


/* Place ID proposal content (scoped) */
.ll-place-id-proposal {
  font-size: 14px;
  line-height: 1.5;
}
.ll-place-id-proposal h3 {
  font-size: 18px;
  margin-bottom: 12px;
}
.ll-place-id-proposal p {
  margin: 6px 0;
}
.ll-place-id-proposal strong { color: #222; }
.ll-place-id-proposal a {
  color: #0073aa;
  text-decoration: none;
}
.ll-place-id-proposal a:hover { text-decoration: underline; }
.ll-place-id-proposal .actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Small screens: slightly tighter card */
@media (max-width: 480px) {
  .dashboard-modal-content {
    padding: 16px;
    width: 94vw;
  }
}

#dashboard-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; }
#dashboard-modal.ll-open { display:block; }
#dashboard-modal-content-container { max-width:720px; background:#fff; border-radius:10px; padding:16px; }

    .ll-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
    .ll-modal-close{background:none;border:0;font-size:22px;cursor:pointer;line-height:1}
    .ll-gbp-quick-form{display:block;background:#fff;padding:16px;border-radius:8px}
    .ll-gbp-quick-form .ll-field{margin-bottom:12px}
    .ll-gbp-quick-form .ll-actions{margin-top:12px}
    .ll-gbp-quick-form .ll-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    @media (max-width:600px){.ll-gbp-quick-form .ll-grid-2{grid-template-columns:1fr}}
    .ll-media-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
    .ll-placeholder{padding:8px 10px;background:#f7f7f7;border:1px dashed #ddd;border-radius:6px;color:#666}
    .ll-images-grid{display:flex;flex-wrap:wrap;gap:8px;min-height:40px}
    .ll-image-chip{position:relative;width:96px;height:96px;border-radius:8px;overflow:hidden;background:#f7f7f7;border:1px solid #e5e5e5}
    .ll-image-chip img{width:100%;height:100%;object-fit:cover;display:block}
    .ll-chip-remove{position:absolute;top:2px;right:2px;background:#fff;border:1px solid #ddd;border-radius:50%;width:22px;height:22px;line-height:18px;text-align:center;font-weight:bold;cursor:pointer}
    .link-button{background:none;border:none;color:#2271b1;cursor:pointer;text-decoration:underline;padding:0 2px}
    .ll-media-warning{color:#a00}