/* =======================================================================
   Casino Hydra - Heading Styles v2
   36 STYLES | Unified headings for all blocks
   ======================================================================= */

/* Base heading */
.hydra-h.hydra-h.hydra-h {
  --h-accent: #3b82f6;
  --h-secondary: #8b5cf6;
  --h-text: #111827;
  --h-muted: #6b7280;
  
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--h-text) !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Dark theme */
.hydra-card--dark .hydra-h.hydra-h.hydra-h,
.uac-wrapper--dark .hydra-h.hydra-h.hydra-h,
.hydra-scr--dark .hydra-h.hydra-h.hydra-h {
  --h-text: #f8fafc;
  --h-muted: #64748b;
}

/* =======================================================================
   1. LINE LEFT
   ======================================================================= */
.hydra-h--line-left::before {
  content: '' !important;
  width: 4px !important;
  height: 28px !important;
  background: var(--h-accent) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* =======================================================================
   2. UNDERLINE ACCENT
   ======================================================================= */
.hydra-h--underline-accent {
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 12px !important;
  gap: 0 !important;
}
.hydra-h--underline-accent::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 48px !important;
  height: 4px !important;
  background: var(--h-accent) !important;
  border-radius: 2px !important;
}

/* =======================================================================
   3. GRADIENT LINE
   ======================================================================= */
.hydra-h--gradient-line {
  position: relative !important;
  display: block !important;
  padding-bottom: 14px !important;
  gap: 0 !important;
}
.hydra-h--gradient-line::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--h-accent) 0%, transparent 100%) !important;
  border-radius: 2px !important;
}

/* =======================================================================
   4. DOUBLE LINE
   ======================================================================= */
.hydra-h--double-line {
  position: relative !important;
  display: block !important;
  padding-bottom: 16px !important;
  gap: 0 !important;
}
.hydra-h--double-line::before {
  content: '' !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 0 !important;
  width: 40px !important;
  height: 3px !important;
  background: var(--h-accent) !important;
  border-radius: 2px !important;
}
.hydra-h--double-line::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 24px !important;
  height: 3px !important;
  background: var(--h-accent) !important;
  opacity: 0.4 !important;
  border-radius: 2px !important;
}

/* =======================================================================
   5. DOT
   ======================================================================= */
.hydra-h--dot::before {
  content: '' !important;
  width: 10px !important;
  height: 10px !important;
  background: var(--h-accent) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* =======================================================================
   6. BRACKET
   ======================================================================= */
.hydra-h--bracket::before {
  content: '[' !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  color: var(--h-accent) !important;
  line-height: 1 !important;
}

/* =======================================================================
   7. HIGHLIGHT
   ======================================================================= */
.hydra-h--highlight {
  gap: 0 !important;
}
.hydra-h--highlight span {
  background: linear-gradient(120deg, var(--h-accent) 0%, var(--h-accent) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 35% !important;
  background-position: 0 88% !important;
}

/* =======================================================================
   8. SIDE LINES
   ======================================================================= */
.hydra-h--side-lines {
  gap: 20px !important;
}
.hydra-h--side-lines::before {
  content: '' !important;
  width: 32px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--h-accent), transparent) !important;
  border-radius: 1px !important;
  flex-shrink: 0 !important;
}
.hydra-h--side-lines::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--h-muted)) !important;
  opacity: 0.3 !important;
}

/* =======================================================================
   9. SLASH
   ======================================================================= */
.hydra-h--slash::before {
  content: '//' !important;
  font-weight: 800 !important;
  color: var(--h-accent) !important;
  letter-spacing: -3px !important;
}

/* =======================================================================
   10. BLOCK ACCENT
   ======================================================================= */
.hydra-h--block-accent {
  gap: 16px !important;
}
.hydra-h--block-accent::before {
  content: '' !important;
  width: 8px !important;
  height: 100% !important;
  min-height: 28px !important;
  background: linear-gradient(180deg, var(--h-accent) 0%, var(--h-secondary) 100%) !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

/* =======================================================================
   11. NUMBER
   ======================================================================= */
.hydra-h--number::before {
  content: attr(data-num) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--h-accent) !important;
  background: rgba(59, 130, 246, 0.15) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

/* =======================================================================
   12. CORNER
   ======================================================================= */
.hydra-h--corner {
  position: relative !important;
  padding-left: 20px !important;
  gap: 0 !important;
}
.hydra-h--corner::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 12px !important;
  height: 12px !important;
  border-left: 3px solid var(--h-accent) !important;
  border-top: 3px solid var(--h-accent) !important;
  border-radius: 2px 0 0 0 !important;
}

/* =======================================================================
   13. STEPS
   ======================================================================= */
.hydra-h--steps::before {
  content: '' !important;
  width: 18px !important;
  height: 18px !important;
  background: 
    linear-gradient(var(--h-accent), var(--h-accent)) 0 12px / 6px 6px no-repeat,
    linear-gradient(var(--h-accent), var(--h-accent)) 6px 6px / 6px 6px no-repeat,
    linear-gradient(var(--h-accent), var(--h-accent)) 12px 0 / 6px 6px no-repeat !important;
  flex-shrink: 0 !important;
}

/* =======================================================================
   14. ARROW
   ======================================================================= */
.hydra-h--arrow::before {
  content: '→' !important;
  font-size: 24px !important;
  color: var(--h-accent) !important;
  font-weight: 400 !important;
}

/* =======================================================================
   15. LABEL
   ======================================================================= */
.hydra-h--label {
  display: inline-flex !important;
  background: rgba(59, 130, 246, 0.1) !important;
  padding: 10px 20px 10px 16px !important;
  border-radius: 8px !important;
  border-left: 4px solid var(--h-accent) !important;
  gap: 0 !important;
}

/* =======================================================================
   16. MINIMAL
   ======================================================================= */
.hydra-h--minimal {
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--h-muted) !important;
  gap: 0 !important;
}

/* =======================================================================
   17. LINE AFTER
   ======================================================================= */
.hydra-h--line-after {
  gap: 20px !important;
}
.hydra-h--line-after::after {
  content: '' !important;
  flex: 1 !important;
  height: 2px !important;
  background: var(--h-accent) !important;
  border-radius: 1px !important;
}

/* =======================================================================
   18. LINE AFTER FADE
   ======================================================================= */
.hydra-h--line-after-fade {
  gap: 20px !important;
}
.hydra-h--line-after-fade::after {
  content: '' !important;
  flex: 1 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--h-accent), transparent) !important;
  border-radius: 1px !important;
}

/* =======================================================================
   19. BOTH LINES
   ======================================================================= */
.hydra-h--both-lines {
  gap: 20px !important;
  text-align: center !important;
}
.hydra-h--both-lines::before,
.hydra-h--both-lines::after {
  content: '' !important;
  flex: 1 !important;
  height: 2px !important;
  background: var(--h-accent) !important;
  border-radius: 1px !important;
}

/* =======================================================================
   20. BOTH LINES FADE
   ======================================================================= */
.hydra-h--both-lines-fade {
  gap: 20px !important;
  text-align: center !important;
}
.hydra-h--both-lines-fade::before {
  content: '' !important;
  flex: 1 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--h-accent)) !important;
  border-radius: 1px !important;
}
.hydra-h--both-lines-fade::after {
  content: '' !important;
  flex: 1 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--h-accent), transparent) !important;
  border-radius: 1px !important;
}

/* =======================================================================
   21. UNDERLINE FULL
   ======================================================================= */
.hydra-h--underline-full {
  display: block !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--h-accent) !important;
  gap: 0 !important;
}

/* =======================================================================
   22. UNDERLINE FULL FADE
   ======================================================================= */
.hydra-h--underline-full-fade {
  display: block !important;
  position: relative !important;
  padding-bottom: 14px !important;
  gap: 0 !important;
}
.hydra-h--underline-full-fade::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--h-accent), var(--h-accent) 30%, transparent) !important;
}

/* =======================================================================
   23. DOUBLE UNDERLINE FULL
   ======================================================================= */
.hydra-h--double-underline {
  display: block !important;
  position: relative !important;
  padding-bottom: 18px !important;
  gap: 0 !important;
}
.hydra-h--double-underline::before {
  content: '' !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--h-accent) !important;
}
.hydra-h--double-underline::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--h-accent) !important;
  opacity: 0.3 !important;
}

/* =======================================================================
   24. DOT LINE
   ======================================================================= */
.hydra-h--dot-line {
  gap: 16px !important;
}
.hydra-h--dot-line::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--h-accent) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.hydra-h--dot-line::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--h-muted), transparent) !important;
}

/* =======================================================================
   25. LINE BEFORE
   ======================================================================= */
.hydra-h--line-before {
  gap: 20px !important;
}
.hydra-h--line-before::before {
  content: '' !important;
  width: 60px !important;
  height: 2px !important;
  background: var(--h-accent) !important;
  border-radius: 1px !important;
  flex-shrink: 0 !important;
}
.hydra-h--line-before::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--h-muted) !important;
  opacity: 0.3 !important;
}

/* =======================================================================
   26. ACCENT LINE
   ======================================================================= */
.hydra-h--accent-line {
  gap: 16px !important;
}
.hydra-h--accent-line::before {
  content: '' !important;
  width: 4px !important;
  height: 24px !important;
  background: var(--h-accent) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}
.hydra-h--accent-line::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--h-muted) 0%, transparent 100%) !important;
  opacity: 0.5 !important;
}

/* =======================================================================
   27. BRACKET LINE
   ======================================================================= */
.hydra-h--bracket-line {
  gap: 14px !important;
}
.hydra-h--bracket-line::before {
  content: '[' !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: var(--h-accent) !important;
}
.hydra-h--bracket-line::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--h-accent) 0%, transparent 100%) !important;
  opacity: 0.5 !important;
}

/* =======================================================================
   28. ARROW LINE
   ======================================================================= */
.hydra-h--arrow-line {
  gap: 14px !important;
}
.hydra-h--arrow-line::before {
  content: '→' !important;
  font-size: 20px !important;
  color: var(--h-accent) !important;
}
.hydra-h--arrow-line::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--h-muted), transparent) !important;
  opacity: 0.4 !important;
}

/* =======================================================================
   29. SLASH LINE
   ======================================================================= */
.hydra-h--slash-line {
  gap: 14px !important;
}
.hydra-h--slash-line::before {
  content: '//' !important;
  font-weight: 700 !important;
  color: var(--h-accent) !important;
  letter-spacing: -2px !important;
}
.hydra-h--slash-line::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--h-accent) 0%, transparent 50%) !important;
  opacity: 0.4 !important;
}

/* =======================================================================
   30. BLOCK LINE
   ======================================================================= */
.hydra-h--block-line {
  gap: 16px !important;
}
.hydra-h--block-line::before {
  content: '' !important;
  width: 6px !important;
  height: 24px !important;
  background: linear-gradient(180deg, var(--h-accent), var(--h-secondary)) !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
}
.hydra-h--block-line::after {
  content: '' !important;
  flex: 1 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--h-accent) 0%, transparent 100%) !important;
  opacity: 0.3 !important;
}

/* =======================================================================
   31. DASHED LINE
   ======================================================================= */
.hydra-h--dashed-line {
  gap: 20px !important;
}
.hydra-h--dashed-line::after {
  content: '' !important;
  flex: 1 !important;
  height: 2px !important;
  background: repeating-linear-gradient(90deg, var(--h-accent) 0px, var(--h-accent) 8px, transparent 8px, transparent 16px) !important;
}

/* =======================================================================
   32. GRADIENT BAR
   ======================================================================= */
.hydra-h--gradient-bar {
  display: block !important;
  position: relative !important;
  padding-bottom: 16px !important;
  gap: 0 !important;
}
.hydra-h--gradient-bar::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--h-accent), var(--h-secondary), #ec4899) !important;
  border-radius: 2px !important;
}

/* =======================================================================
   33. THIN FULL
   ======================================================================= */
.hydra-h--thin-full {
  display: block !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--h-muted) !important;
  gap: 0 !important;
}

/* =======================================================================
   34. DOUBLE COLOR
   ======================================================================= */
.hydra-h--double-color {
  display: block !important;
  position: relative !important;
  padding-bottom: 16px !important;
  gap: 0 !important;
}
.hydra-h--double-color::before {
  content: '' !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: var(--h-accent) !important;
  border-radius: 2px !important;
}
.hydra-h--double-color::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 60% !important;
  height: 3px !important;
  background: var(--h-secondary) !important;
  border-radius: 2px !important;
}

/* =======================================================================
   35. CENTER FADE
   ======================================================================= */
.hydra-h--center-fade {
  gap: 24px !important;
  justify-content: center !important;
  text-align: center !important;
}
.hydra-h--center-fade::before {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--h-accent)) !important;
}
.hydra-h--center-fade::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--h-accent), transparent) !important;
}

/* =======================================================================
   36. DIAMOND LINES
   ======================================================================= */
.hydra-h--diamond-lines {
  gap: 16px !important;
}
.hydra-h--diamond-lines::before {
  content: '' !important;
  width: 10px !important;
  height: 10px !important;
  background: var(--h-accent) !important;
  transform: rotate(45deg) !important;
  flex-shrink: 0 !important;
}
.hydra-h--diamond-lines::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--h-accent), transparent) !important;
  opacity: 0.5 !important;
}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width: 640px) {
  .hydra-h.hydra-h.hydra-h {
    font-size: 18px !important;
    gap: 12px !important;
    margin: 0 0 20px 0 !important;
  }
  
  .hydra-h--line-left::before,
  .hydra-h--accent-line::before,
  .hydra-h--block-line::before {
    height: 22px !important;
    min-height: 22px !important;
  }
  
  .hydra-h--block-accent::before {
    min-height: 22px !important;
  }
  
  .hydra-h--side-lines,
  .hydra-h--both-lines,
  .hydra-h--both-lines-fade,
  .hydra-h--center-fade {
    gap: 14px !important;
  }
  
  .hydra-h--side-lines::before,
  .hydra-h--line-before::before {
    width: 24px !important;
  }
}