/*
    tool-tip.css 11.22.25
    styles/global/tool-tip.css - Informative hover images or text with camera icon indicator.
    version 0.0.1
    Website iteration 10 - "Logo Banner update" | v 10.0.8
*/

.tooltip-trigger {
	 color: #e67e22;
	 font-weight: bold;
	 cursor: pointer;
	 border-bottom: 1px dotted #e67e22;
	 position: relative;
	 display: inline-flex;
	 align-items: baseline;
  }

  .tooltip-indicator::after {
	 content: '📸';
	 font-size: 0.7em;
	 vertical-align: super;
	 line-height: 1;
	 margin-left: 2px;
	 opacity: 0.7;
	 transition: opacity 0.2s;
	 display: inline-flex;
	 align-items: center;
	 position: relative;
	 top: -0.4em;
  }

  .tooltip-trigger:hover .tooltip-indicator::after {
	 opacity: 1;
  }

  .tooltip {
	 position: absolute;
	 background-color: white;
	 border: 1px solid #ddd;
	 border-radius: 4px;
	 padding: 10px;
	 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	 z-index: 1000;
	 width: 220px;
	 text-align: center;
	 opacity: 0;
	 visibility: hidden;
	 transition: opacity 0.3s, visibility 0.3s;
	 bottom: 100%;
	 left: 50%;
	 transform: translateX(-50%);
	 margin-bottom: 10px;
  }

  .tooltip::after {
	 content: '';
	 position: absolute;
	 top: 100%;
	 left: 50%;
	 transform: translateX(-50%);
	 border-width: 5px;
	 border-style: solid;
	 border-color: white transparent transparent transparent;
  }

  .tooltip img {
	 max-width: 200px;
	 max-height: 200px;
	 border-radius: 4px;
  }

  .tooltip-trigger:hover .tooltip {
	 opacity: 1;
	 visibility: visible;
  }

  .tooltip-caption {
	 margin-top: 8px;
	 font-size: 0.85em;
	 color: #666;
  }