.pop-btn {
      position: fixed;
      left: 18px;
      bottom: 2.25rem;
      width: 50px;
      height:50px;
      line-height:20px;
      text-align:center;
      z-index: 999;
      background: var(--global_accent_color) !important;
      color: white;
      border: none;
      padding: 12px 14px;
      border-radius: 999px;
      box-shadow: 0 6px 18px rgba(5,30,70,0.15);
      cursor: pointer;
		}
		.pop-btn:focus, .pop-btn:active {
      outline:none !important;
      box-shadow: 0 6px 18px rgba(5,30,70,0.15) !important;
    }
    .pop-btn .fa {
			display: block;
			font-size: 26px;
			margin-top: -6px;
			margin-left:-4px;
    }

    /* Popover container */
    .pop-over {
      position: fixed;
      left: 85px; /* distance to the left of the help button */
      bottom: 1.0rem;
      top:auto;
      max-width: 320px;
      z-index: 1000;
      transform-origin: 100% 100%;
      animation: popIn .18s ease-out;
      pointer-events: auto;
    }

    @keyframes popIn {
      from { transform: scale(.95) translateY(6px); opacity: 0 }
      to   { transform: scale(1) translateY(0); opacity: 1 }
    }

    /* Speech bubble card */
    .bubble {
      background: rgba(255,255,255,0.97);
      -background: rgba(17,17,17,0.97);
      border-radius: 14px;
      padding: 16px 18px;
      box-shadow: 0 6px 18px rgba(12,30,60,0.12);
      position: relative;
      font-size: 15px;
      line-height: 1.35;
      color: #17181a;
      border: 1px solid rgba(11,37,64,0.06);
    }

    /* Arrow (the speech tail) */
    .bubble::after {
      content: "";
      position: absolute;
      left: -10px; /* attach to the right-hand side */
      bottom: 34px;
      width: 18px;
      height: 18px;
      background: white;
      background: rgba(255,255,255,0.97);
      -background: rgba(17,17,17,0.97);
      transform: rotate(45deg);
    }

    /* Close icon */
    .pop-close {
      position: absolute;
      top: 0px;
      right: 6px;
      background: transparent;
      border: none;
      font-size: 15px;
      cursor: pointer;
      color: #111;
      opacity:0.7;
      padding: 6px;
      border-radius: 6px;
    }
    .pop-close:hover { opacity:1; background:transparent;color: #111; }

    /* Small header if needed */
    .bubble h3, .bubble h4 { margin: 0 0 8px 0; font-size: 16px !important; color: var(--global_accent_color) !important; }

    /* Hidden state */
    .hidden { display: none }

    /* Responsive tweak: move arrow center on small screens */
    @media (max-width:420px) {
      .pop-over { right: 12px; left: 12px; bottom: 12px; }
      .bubble::after { right: 22px; }
      .pop-btn { right: 12px; bottom: 12px }
    }