/* ==========================================
   CSS CUSTOM VARIABLES (THEMING)
========================================== */
:root {
  --html-tooltip-bg: #ffffff;
  --html-tooltip-color: #1a202c;
  --html-tooltip-border: #e2e8f0;
  --html-tooltip-radius: 8px;
  --html-tooltip-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --html-tooltip-width: 250px;
  
  --html-tooltip-delay: 0.3s;
  --html-tooltip-duration: 0.2s;
}

/* ==========================================
   THE TRIGGER WRAPPER
========================================== */
.html-tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* ==========================================
   THE CONTAINER (RICH HTML BUBBLE)
========================================== */
.html-tooltip-box {
  position: absolute;
  width: var(--html-tooltip-width);
  background-color: var(--html-tooltip-bg);
  color: var(--html-tooltip-color);
  border: 1px solid var(--html-tooltip-border);
  border-radius: var(--html-tooltip-radius);
  box-shadow: var(--html-tooltip-shadow);
  padding: 12px;
  z-index: 100;
  
  /* Reset alignment for inner text content */
  text-align: left;
  white-space: normal;
  font-weight: normal;
  
  /* Hidden State */
  opacity: 0;
  pointer-events: none;
  
  /* Asymmetric Transition Engine (Instantly hides on leave) */
  transition: opacity var(--html-tooltip-duration) ease, transform var(--html-tooltip-duration) ease;
  transition-delay: 0.3s;
}

/* Arrow Base Structure */
.html-tooltip-box::before {
  content: "";
  position: absolute;
  border-style: solid;
  z-index: 101;
}

/* ==========================================
   TRIGGER INTERACTIONS
========================================== */
.html-tooltip-trigger:hover .html-tooltip-box,
.html-tooltip-trigger:focus-within .html-tooltip-box {
  opacity: 1;
  pointer-events: auto; /* Allows clicking links/buttons inside the tooltip */
  transition-delay: var(--html-tooltip-delay);
}

/* ==========================================
   4-WAY CARDINAL POSITIONING
========================================== */

/* TOP POSITION */
.html-tooltip-trigger.pos-top .html-tooltip-box {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -12px);
}
.html-tooltip-trigger.pos-top .html-tooltip-box::before {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-color: var(--html-tooltip-border) transparent transparent transparent;
}
.html-tooltip-trigger.pos-top:hover .html-tooltip-box {
  transform: translate(-50%, -6px);
}

/* BOTTOM POSITION */
.html-tooltip-trigger.pos-bottom .html-tooltip-box {
  top: 100%;
  left: 50%;
  transform: translate(-50., 12px);
}
.html-tooltip-trigger.pos-bottom .html-tooltip-box::before {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent var(--html-tooltip-border) transparent;
}
.html-tooltip-trigger.pos-bottom:hover .html-tooltip-box {
  transform: translate(-50%, 6px);
}

/* LEFT POSITION */
.html-tooltip-trigger.pos-left .html-tooltip-box {
  right: 100%;
  top: 50%;
  transform: translate(-12px, -50%);
}
.html-tooltip-trigger.pos-left .html-tooltip-box::before {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent var(--html-tooltip-border);
}
.html-tooltip-trigger.pos-left:hover .html-tooltip-box {
  transform: translate(-6px, -50%);
}

/* RIGHT POSITION */
.html-tooltip-trigger.pos-right .html-tooltip-box {
  left: 100%;
  top: 50%;
  transform: translate(12px, -50%);
}
.html-tooltip-trigger.pos-right .html-tooltip-box::before {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-color: transparent var(--html-tooltip-border) transparent transparent;
}
.html-tooltip-trigger.pos-right:hover .html-tooltip-box {
  transform: translate(6px, -50%);
}

/* ==========================================
   OPTIONAL INNER CONTENT STYLING EXAMPLE
========================================== */
.tooltip-header {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tooltip-body {
  font-size: 12px;
  color: #4a5568;
}
.tooltip-link {
  color: #3182ce;
  text-decoration: underline;
  font-size: 12px;
  display: inline-block;
  margin-top: 6px;
}

/* ==========================================
   ---------------EXAMPLE--------------
   <!-- Example 1: HTML Info Card Tooltip (Top Position) -->
<div class="html-tooltip-trigger pos-top" tabindex="0" style="width:auto;">
  <span style="border-bottom: 1px dashed #718096;">Pricing Details</span>
  
  <!-- Tooltip Box Content -->
  <div class="html-tooltip-box" role="tooltip">
    <div class="tooltip-header">
      <strong>Premium Tier</strong>
    </div>
    <div class="tooltip-body">
      Unlock unlimited API requests, dedicated instances, and 24/7 technical support lines.
    </div>
    <a href="/pricing" class="tooltip-link">View full breakdown</a>
  </div>
</div>

<!-- Example 2: Interactive Rich Form Hint (Right Position) -->
<div class="html-tooltip-trigger pos-right" style="width:auto;">
  <button type="button" aria-haspopup="true" style="background:none; border:none; font-size:16px;">this button</button>
  
  <!-- Tooltip Box Content -->
  <div class="html-tooltip-box" role="tooltip">
    <div class="tooltip-header" style="color: #e53e3e;">
      <i class="fa-solid fa-bullseye text-tertiary"></i> Security Notice
    </div>
    <div class="tooltip-body">
      Your password must score high on structural strength. <strong>Never</strong> reuse old platform credentials.
    </div>
  </div>
</div>

========================================== */




/* 1. Base Container Setup */
[data-tooltip] {
  position: relative;
  cursor: pointer;
}

/* 2. Base Tooltip Bubble */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  
  /* Multi-line Configuration */
  white-space: pre-line; 
  width: max-content;
  max-width: 200px; 
}

/* 3. Base Tooltip Arrow */
[data-tooltip]::before {
  content: "";
  position: absolute;
  border-style: solid;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

/* 4. Trigger States */
[data-tooltip]:hover::after, [data-tooltip]:hover::before,
[data-tooltip]:focus-within::after, [data-tooltip]:focus-within::before {
  opacity: 1;
}

/* ==========================================
   POSITION VARIATIONS
========================================== */

/* TOP (Default) */
[data-tooltip]:not([data-position])::after,
[data-tooltip][data-position="top"]::after {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
}
[data-tooltip]:not([data-position])::before,
[data-tooltip][data-position="top"]::before {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  border-width: 6px 6px 0 6px;
  border-color: #333 transparent transparent transparent;
}
/* Top Hover Animation */
[data-tooltip]:not([data-position]):hover::after, [data-tooltip]:not([data-position]):hover::before,
[data-tooltip][data-position="top"]:hover::after, [data-tooltip][data-position="top"]:hover::before {
  transform: translate(-50%, -4px);
}

/* BOTTOM */
[data-tooltip][data-position="bottom"]::after {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
}
[data-tooltip][data-position="bottom"]::before {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -4px);
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #333 transparent;
}
[data-tooltip][data-position="bottom"]:hover::after, [data-tooltip][data-position="bottom"]:hover::before {
  transform: translate(-50%, 4px);
}

/* LEFT */
[data-tooltip][data-position="left"]::after {
  right: 100%;
  top: 50%;
  transform: translate(-8px, -50%);
}
[data-tooltip][data-position="left"]::before {
  right: 100%;
  top: 50%;
  transform: translate(4px, -50%);
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #333;
}
[data-tooltip][data-position="left"]:hover::after, [data-tooltip][data-position="left"]:hover::before {
  transform: translate(-4px, -50%);
}

/* RIGHT */
[data-tooltip][data-position="right"]::after {
  left: 100%;
  top: 50%;
  transform: translate(8px, -50%);
}
[data-tooltip][data-position="right"]::before {
  left: 100%;
  top: 50%;
  transform: translate(-4px, -50%);
  border-width: 6px 6px 6px 0;
  border-color: transparent #333 transparent transparent;
}
[data-tooltip][data-position="right"]:hover::after, [data-tooltip][data-position="right"]:hover::before {
  transform: translate(4px, -50%);
}









/* ==========================================
   ---------------EXAMPLE--------------
   <!-- 1. Icon Button (Top Position, Default) -->
<button aria-label="Delete permanent item" data-tooltip="Delete Item">

</button>

<!-- 2. Multi-line Tooltip (Bottom Position) -->
<!-- Note: Use literal line breaks in the HTML string for pre-line to work -->
<button aria-label="Password requirements" data-position="bottom" data-tooltip="Must include:
8 characters
1 number">
  Password Info
</button>

<!-- 3. Form Input Wrapper (Right Position) -->
<div data-tooltip="Enter your legal name" data-position="right" style="display: inline-block;">
  <input type="text" id="username" placeholder="Username" aria-describedby="username-hint">
</div>


========================================== */


/* Tooltip Container */
[aria-label] {
  position: relative;
  cursor: pointer;
}

/* Tooltip Content */
[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 100;
}

/* Tooltip Arrow */
[aria-label]::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 100;
}

/* Hover and Focus States */
[aria-label]:hover::after,
[aria-label]:hover::before,
[aria-label]:focus::after,
[aria-label]:focus::before {
  opacity: 1;
}

/* ==========================================
   ---------------EXAMPLE--------------
   
<button aria-label="Save changes to database">Save</button>



========================================== */