/* pmtcard1.css – mobile-first version 1 */

/* FINAL payments2.css — bullet-aligned vertical timeline (fixed height issue) */

/* Container */
.payments-notes {
  max-width: 960px;
  margin: 2.5rem auto 3rem;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  font-family: "Roboto", sans-serif;
}

/* Each row */
.payments-note-item {
  display: flex;
  align-items: stretch;   /* stretch children to same height so the line can grow */
  margin-bottom: 0;       /* gap on parent already controls spacing */
}

/* LEFT COLUMN: bullet + vertical line */
.payments-note-left {
  position: relative;
  width: 1.1rem;          /* fixed column width ensures perfect alignment */
  display: flex;
  justify-content: center;
}

/* Bullet dot */
.payments-note-bullet {
  width: 0.55rem;
  height: 0.55rem;
  background: #677179;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  margin-top: 0.25rem;    /* vertically aligns with text start */
}

/* Vertical timeline line */
.payments-note-left::after {
  content: "";
  position: absolute;
  top: 0.85rem;               /* begins just under the bullet */
  width: 1px;
  height: calc(100% - 0.85rem);  /* extends to near bottom of row */
  background: #b7b7b7;
  opacity: 0.9;
  left: 50%;
  transform: translateX(-50%);   /* centers directly under bullet */
}



/* Text block */
.payments-note-content.no-line {
  padding-left: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333;
}

/* Highlighted word */
.tooltip-word {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #000;
    font-weight: 600;
}

/* Tooltip container */
.tooltip-box {
    position: absolute;
    top: 1.6rem;           /* spacing under the word */
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    width: 370px;          /* default width */
    max-width: 90vw;       /* responsive */
    display: none;         /* hidden until hover */
    z-index: 99;
}

/* Tooltip image */
.tooltip-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* Show tooltip on hover */
.tooltip-word:hover .tooltip-box {
    display: block;
}

/* Responsive improvements */
@media (max-width: 600px) {
    .tooltip-box {
        top: 1.2rem;
        width: 130px;
        padding: 0.4rem;
    }
}


/* Mobile adjustments */
@media (max-width: 600px) {
  .payments-notes {
    padding: 1.25rem 1rem;
    gap: 1.1rem;
  }

  .payments-note-content.no-line {
    font-size: 0.9rem;
  }
}

/* === Product Management timeline: collapsible entries === */

/* Keep good spacing between visible summary and details */
.pm-entry-main p {
  margin-bottom: 0.5rem;
}

/* Toggle button */
.pm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: none;
  padding: 0.25rem 0;
  font: inherit;
  color: #465e69;
  cursor: pointer;
}

.pm-toggle:hover,
.pm-toggle:focus-visible {
  outline: none;
  color: #20497f;
}

/* Round + / – icon */
.pm-toggle-icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 1px solid #465e69;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}

/* Use aria-expanded to decide + vs – */
.pm-toggle[aria-expanded="false"] .pm-toggle-icon::before {
  content: "+";
}

.pm-toggle[aria-expanded="true"] .pm-toggle-icon::before {
  content: "–";
}

/* Collapsible body spacing */
.pm-entry-body {
  margin-top: 0.5rem;
}

/* New badge: hidden by default (mobile-first) */
.pm-entry-badge {
  display: none;
}

/* Ensure anchors like #prodExp_14 land with some breathing room
   below the fixed global header */
.pm-entry-main p[id^="prodExp_"] {
  scroll-margin-top: 120px;   /* tweak based on your header height */
}

/* Show badges and position them only on wider screens */
@media (min-width: 992px) {
  /* Make each timeline item a positioning context */
  .payments-note-item.pm-entry {
    position: relative;
  }

  .pm-entry-badge {
    display: block;
    position: absolute;
    /* tweak these two values to fine-tune the placement */
    left: -110px;       /* how far left of the grey line */
    top: 1.2rem;        /* vertical alignment near the grey dot */

    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: #FFFFFF;     /* soft teal */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);

    background-position: center;
    background-repeat: no-repeat;
    /*background-size: 60%;*/           /* icon size inside the circle */
    background-size: contain;
  }

  /* Per-entry icons (adjust paths to your actual SVGs/PNGs) */
  .pm-entry--web  .pm-entry-badge { background-image: url("../img/og-iaci-default.jpg"); }
  .pm-entry--home .pm-entry-badge { background-image: url("../img/maint.png"); }
  .pm-entry--care .pm-entry-badge { background-image: url("../img/health.png"); }
  /* you can add .pm-entry--visa, .pm-entry--hr, etc. */
}