/* ==========================================================================
   Catalog buy routes (/js/catalog-buy.js) and the data store popup.
   Shared by the catalogue explorer (explore.html, admin catalog), the Explore
   theme/search pages and the dataset pages. The modal block moved here from
   catalog-preview.css unchanged, so every page shows the same popup.
   ========================================================================== */

/* ---------- Buy route: "See prices and buy" / "Get access" ---------- */
.buy-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font: 400 13px/1.45 'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif;
}
.buy-route[hidden] { display: none; }
.buy-route__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #117865;
  color: #fff !important;
  font: 600 14px/1.2 'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s;
}
.buy-route__button:hover { filter: brightness(0.92); }
.buy-route__button:focus-visible { outline: 3px solid rgba(17, 120, 101, .35); outline-offset: 2px; }
.buy-route--access .buy-route__button { background: #0c62a6; }
.buy-route--access .buy-route__button:focus-visible { outline-color: rgba(12, 98, 166, .35); }
.buy-route__note { color: #5b6b7d; min-width: 0; flex: 1 1 220px; }
.buy-route__note a { color: #0c62a6; }

/* ===========================================================================================
   Commercial Layer Modal
   =========================================================================================== */
.commercial-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: commercialFadeIn 0.2s ease;
}
@keyframes commercialFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.commercial-modal {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  width: 600px;
  max-width: 92vw;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: commercialSlideUp 0.25s ease;
  font-family: 'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif;
}
@keyframes commercialSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.commercial-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #edebe9;
}
.commercial-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #323130;
  flex: 1;
  line-height: 1.3;
}
.commercial-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0078d4;
  background: #e6f2ff;
  border: 1px solid #0078d4;
  border-radius: 4px;
  white-space: nowrap;
}
.commercial-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #605e5c;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.commercial-modal-close:hover {
  background: #f3f2f1;
  color: #323130;
}
.commercial-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
}
.commercial-modal-body::-webkit-scrollbar { width: 6px; }
.commercial-modal-body::-webkit-scrollbar-thumb { background: #c8c6c4; border-radius: 3px; }
.commercial-preview-image {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #edebe9;
  margin-bottom: 16px;
}
.commercial-description {
  font-size: 13px;
  color: #605e5c;
  line-height: 1.6;
  margin-bottom: 16px;
}
.commercial-meta-section {
  margin-top: 14px;
}
.commercial-meta-label {
  font-weight: 600;
  font-size: 13px;
  color: #323130;
  margin-bottom: 4px;
}
.commercial-meta-value {
  font-size: 13px;
  color: #605e5c;
  line-height: 1.5;
}
.commercial-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.commercial-tag {
  padding: 4px 8px;
  font-size: 11px;
  background: #f3f2f1;
  color: #605e5c;
  border-radius: 4px;
}
.commercial-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: #8a8886;
  font-size: 12px;
}
.commercial-divider::before,
.commercial-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #edebe9;
}
.commercial-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.commercial-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s;
  text-align: center;
}
.commercial-btn:hover { filter: brightness(0.92); }
.commercial-btn--visit {
  background: #0078d4;
  color: #ffffff;
}
.commercial-btn--contact {
  background: #117865;
  color: #ffffff;
}
.commercial-modal-footer {
  padding: 12px 24px 16px;
  border-top: 1px solid #edebe9;
  display: flex;
  justify-content: flex-end;
}
.commercial-btn--close {
  background: #ffffff;
  color: #323130;
  border: 1px solid #8a8886;
}
.commercial-btn--close:hover {
  background: #f3f2f1;
  filter: none;
}

/* ---------- Commercial modal: data store ---------- */
.commercial-store {
  padding: 12px 14px;
  border: 1px solid #c7e0da;
  border-radius: 6px;
  background: #f3faf8;
}
.commercial-store__price {
  font-size: 15px;
  font-weight: 600;
  color: #117865;
}
.commercial-store__note {
  font-size: 13px;
  color: #605e5c;
  margin-top: 2px;
}
.commercial-modal--store {
  width: 1100px;
  max-width: 96vw;
}
.commercial-modal--store .commercial-modal-body {
  padding: 16px;
}
.commercial-store__host {
  min-height: 520px;
}
@media (max-width: 760px) {
  .commercial-store__host > div { flex-direction: column !important; }
}