/* Freemium 2 – Design tokens */
:root {
  /* Text colours */
  --fm2-text: #0f172a;         /* primary text (from front.css) */
  --fm2-text-soft: #334155;    /* softer text */

  /* Brand / action colours */
  --fm2-light-primary: #3b98f5;
  --fm2-primary: #004095;      /* link / primary action */
  --fm2-primary-hover: #003170;
  --fm2-link: #004095;         /* for fm3 links */

  /* Neutrals */
  --fm2-border-soft: #e2e8f0;  /* table borders (slate-200) */
  --fm2-border-input: #cbd5e1; /* input borders (slate-300) */
  --fm2-bg-soft: #f8fafc;      /* header / soft background */
  --fm2-bg-white: #ffffff;

  /* Stage / icon colours */
  --fm2-stage-text: #7f8aa5;   /* stage labels */
  --fm2-stage-icon: #6c7a96;   /* neutral icon colour */
  --fm2-stage-muted: #cbd5e1;  /* future/disabled icons */

  /* Shape & focus */
  --fm2-radius: 8px;
  --fm2-shadow-focus: 0 0 0 2px rgba(0, 64, 149, 0.25);
  --fm2-stage-disabled: #6c7a96;
  --fm2-stage-available: #92C7FC;
  --fm2-stage-current: #3B98F5; /* or a specific colour if you prefer */
    --fm2-accent: #e41957; /* brand accent */
   --fm2-submit-btn: #e41957;
}


/* Freemium 2 — Search form layout & controls */
.fm2-search {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 10px 0 20px;
  color: var(--fm2-text);
}

.fm2-search .fm2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .fm2-search .fm2-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .fm2-search .fm2-grid {
    grid-template-columns: 1fr;
  }
}

.fm2-search .fm2-field {
  display: flex;
  flex-direction: column;
  min-width: 220px;
}

.fm2-search .fm2-label {
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--fm2-text);
  font-weight: 600;
}

.fm2-search select,
.fm2-search input[type="text"] {
  padding: 8px 10px;
  border-radius: var(--fm2-radius);
  border: 1px solid var(--fm2-border-soft);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  width: 100%;
}

.fm2-search select:focus,
.fm2-search input[type="text"]:focus {
  border-color: var(--fm2-primary);
  box-shadow: var(--fm2-shadow-focus);
}

/* Button row sits BELOW the grid, centered */
.fm2-search .fm2-actions {
  display: flex;
    flex
  justify-content: center;
  margin-top: 4px;
    margin: auto;
}

.fm2-search .fm2-actions .fm2-submit {
  padding: 10px 14px;
  border: 0;
  border-radius: var(--fm2-radius);
  background: var(--fm2-submit-btn);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s, transform .02s;
  min-width: 160px;
}

.fm2-search .fm2-actions .fm2-submit:hover {
  background: var(--fm2-primary-hover);
}

.fm2-search .fm2-actions .fm2-submit:active {
  transform: translateY(1px);
}

/* FM2 – visual loading state for search results */
.fm2-results.fm2-loading {
  position: relative;
}

/* Dim the table while loading */
.fm2-results.fm2-loading table {
  opacity: 0.4;
}

/* Simple loading message overlay */
.fm2-results.fm2-loading::after {
  content: "Loading results…";
  position: absolute;
  inset: 40% 0 auto 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  margin: 0 auto;
  max-width: 220px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* =========================================================
 * Freemium 3 – Results table & stage icons
 * ======================================================= */

/* Generic columns */
.fm3-col {
  vertical-align: top;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
}

.fm3-col--description {
  /*width: 100%; */
}

/* Column widths (tune as needed) */
.fm3-col--stage {
 /* width: 190px; /* tweak if needed */
  white-space: nowrap;
}

/* Column 1: stage name + icons */
.fm3-col--stage svg {
    fill: currentColor !important;
    stroke: none !important;
}

/* Column 3: region */
.fm3-col--region {
  font-size: 16px;
  color: var(--fm2-text-soft);
  /* white-space: nowrap; */
}

/* Column 4: deadline */
.fm3-col--deadline {
  font-size: 16px;
  font-weight: 500;
  text-align: right;
}

/* Column 5: attachments / docs button */
.fm3-col--attachments {
  text-align: center;
}

/* Description column link */
.fm3-col--description .fm3-link {
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
  color: var(--fm2-link); /* EBP-ish blue */
}
.fm3-col--description .fm3-link:hover,
.fm3-col--description .fm3-link:focus {
  text-decoration: underline;
}

/* Stage name (above icons) */
.fm3-stage-name {
  font-size: 16px;
  color: var(--fm2-text-soft); /* soft grey from design system */
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

/* Icons row */
.fm3-stage-icons {
  display: flex;
    flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Individual stage icon – we use <span role="button"> */
.fm3-stage-icon {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 2px;
  padding: 0 !important;
    border: none !important;
    background: transparent !important;
  cursor: default; /* later: pointer when we wire clicks */
  color: var(--fm2-stage-icon) !important; /* neutral grey-blue */
}

.fm3-doc-svg {
  width: 24px;
  height: 24px;
  display: inline-block;
}

/* SVG inside stage icon */
.fm3-stage-icon svg {
  width: 24px !important;
  height: 24px !important;
  display: block;
  flex-shrink: 0;
}

/* F3 – Stage state classes */
.fm3-stage-icon.is-disabled {
  color: var(--fm2-stage-disabled) !important;
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.fm3-stage-icon.is-available {
  opacity: 1;
  color: var(--fm2-stage-available) !important;
  cursor: pointer;
}

.fm3-stage-icon.is-available:hover {
  color: var(--fm2-stage-available-hover) !important;
}

.fm3-stage-icon.is-current {
  opacity: 1;
  color: var(--fm2-stage-current) !important;
  cursor: pointer;
  text-decoration: underline;
  position: relative;
  height: 35px;
border-style: solid;
  border-width: 0 0 1px 0 !important;
}

.fm3-stage-icon.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* adjust to taste */
  height: 2px;
  background: currentColor; /* underline matches icon’s brand colour */
  border-radius: 2px;
}

/* Active document icon underline using a pseudo-element */
.fm3-doc-link:not(.is-disabled) {
  position: relative;
}

 /*.fm3-stage-icon:not(.is-disabled)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;  tweak if needed 
  height: 2px;
  background: currentColor;  matches icon colour 
  border-radius: 999px;
} */

.fm3-docs-btn {
  border: none;
  background: none;
  padding: 4px;
  cursor: pointer;
  font-size: 16px; /* for the 📎 placeholder */
}

.fm3-docs-btn:hover {
  transform: translateY(-1px);
}

.fm3-doc-link.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* Results table */
/* Hide results until a search is performed */
.fm2-results {
  display: none;
    overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fm2-results .fm2-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  border: none;
  border-spacing: 0;
  box-shadow: none;
  border-color: #fff;
}
.fm2-results .fm2-table th,
.fm2-results .fm2-table td {
  /* was: border: 1px solid #e2e8f0;
  border: solid var(--fm2-border-soft);
  border-bottom: 1px; */
  text-align: left;
  padding: 16px;
  border-top: none !important;
  border-bottom: none;
  border-left: none;
  box-shadow: none !important;
  border-right: none;
}

.fm2-results .fm2-table tbody tr:nth-child(1) {
  padding-top: 20px;
  border-top: 1px solid transparent;
}

.fm2-results .fm2-table tbody tr:nth-child(even) {
  border: solid;
  border-color: #3B98F5;
  border-width: 0px 0px 0px 2px !important;
  background: linear-gradient(90deg,rgba(240, 247, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
}

.fm2-results .fm2-table thead th {
  /* was: background: #f8fafc; color: #0f172a; */
  background: var(--fm2-bg-white);
  color: var(--fm2-text);
}

.fm2-results thead tr {
  border-bottom: 1px solid var(--fm2-border-soft);
  margin-bottom: 20px;
}

.fm3-results-note {
  font-size: 14px;
  color: var(--fm2-text-soft);
}

.fm3-extra-row td{
  padding: 0;
  border: none;
  background-color: #fff;
}

.fm3-row-divider {
  height: 1px;
  background: var(--fm2-border-soft);
  margin: 0 16px;
}

.fm3-spacer-row td.fm3-spacer-cell{
  padding: 0 !important;
  border: 0 !important;
  height: 20px;          /* the gap */
  line-height: 20px;
  background: transparent !important;
}

/* =========================================================
 * FM2 – Tender detail access enforcement
 * ======================================================= */

/* FM2 – Tender detail access enforcement */

/* Premium / private tenders: never show full detail blocks */
.fm2-detail[data-fm2-access="premium"],
.fm2-details-full[data-fm2-access="premium"] {
  display: none !important;
}

/* Public tenders – locked: hide details */
.fm2-detail[data-fm2-access="public"][data-fm2-state="locked"],
.fm2-details-full[data-fm2-access="public"][data-fm2-state="locked"] {
  display: none !important;
}

/* Public tenders – unlocked: show details */
.fm2-detail[data-fm2-access="public"][data-fm2-state="unlocked"],
.fm2-details-full[data-fm2-access="public"][data-fm2-state="unlocked"] {
  display: block;
}

.fm3-stage-name {
    display: block;
}

.fm3-stage-detail {
    padding-left: 26px;
    padding-top:26px;
}

/* FM3 – Detail page phase bar colour overrides
   Only affects the phase icons rendered inside .fm3-stage-detail,
   leaves the results-page icons unchanged. */
.fm3-stage-detail {
  /* Disabled / future icons */
  --fm2-stage-disabled: #64748b;           /* slate-ish grey, readable on dark blue */

  /* Available (past/previous) icons */
  --fm2-stage-available: #38bdf8;         /* cyan */
  --fm2-stage-available-hover: #7dd3fc;   /* lighter cyan on hover */

  /* Current stage icon */
  --fm2-stage-current: #f97316;           /* warm orange highlight */
}

/* FM2 – Tender detail full text styling */

.fm2-detail-title {
    font-size: 24px;
    line-height: 1.6;
    color: #1e548a;
    font-weight: 600;
}

.ppar .h2 .label {
    font-size: 18px;
    color: #1e548a;
    font-weight: 600;
    line-height: 1;
}

.ptxt {
    font-size: 16px;
    color: #111111;
    font-weight: 400;
    line-height: normal;
}

.fm2-detail-description h1 {
  font-size: 16px;
  line-height: 1.6;
  color: #111;
}

/* Spacing between blocks */
.fm2-detail-description p,
.fm2-detail-description ul,
.fm2-detail-description ol {
  margin: 0 0 12px;
}

/* Lists */
.fm2-detail-description ul,
.fm2-detail-description ol {
  padding-left: 20px;
}

/* Links */
.fm2-detail-description a {
  text-decoration: underline;
  word-break: break-word;
}

/* Headings if the API text contains them */
.fm2-detail-description h1,
.fm2-detail-description h2,
.fm2-detail-description h3 {
  margin: 16px 0 10px;
  line-height: 1.25;
}

/* Tables (some tenders include ugly HTML tables) */
.fm2-detail-description table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}
.fm2-detail-description th,
.fm2-detail-description td {
  border: 1px solid #ddd;
  padding: 8px;
  vertical-align: top;
}

/* Responsive: stack at narrow widths */
@media (max-width: 900px) {
  .fm2-search .fm2-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .fm2-search .fm2-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------Modals------------*/
/* FM2 Modal Heading */
.fm2-modal__heading {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.fm2-modal {
    display: none;

  position: fixed;

  inset: 0;
  z-index: 999999;
}
.fm2-modal.is-open {

  display: block;

}

/* FM2 – blur the whole page behind the modal, but keep the modal itself sharp 
* body.fm2-premium-blur::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999998; /* just below .fm2-modal (999999) 
 * backdrop-filter: blur(10px);
*  -webkit-backdrop-filter: blur(10px);
 * background: rgba(255, 255, 255, 0.08); /* slight frost 
* pointer-events: auto; /* blocks clicks to underlying page 
* }  */

.fm2-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
    z-index: 1;
}
.fm2-modal__panel {
  z-index: 2;
}

/* Premium: lock the modal – no close button */
.fm2-modal.fm2-modal--premium-locked .fm2-modal__close {
  display: none;
}

.fm2-modal__cta {
  margin-top: 20px;
  margin-bottom: 20px;
}

.fm2-modal__gdpr {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.85;
}

.fm2-modal__continue {
  margin-top: 8px;
}



/* Later we can style public vs premium differently */
.fm3-docs-btn.fm3-premium-action { }
.fm3-docs-btn.fm3-public-docs  { }