@props([
  'number'    => '0',
  'title'     => '',
  'delta'     => null,
  'deltaClass'=> 'bg-danger-transparent',
  'iconClass' => null,    // e.g. 'fa fa-users' or 'ri-user-3-line'
  'circleSize'=> 82,      // px (diameter)
  'circleBg'  => 'linear-gradient(135deg, rgba(237,233,255,0.9), rgba(242,245,255,0.9))',
  'circleOpacity' => 1,
  'iconColor' => 'rgba(99,102,241,1)', // default purple-ish
  'iconSize'  => 40  ,
  'iconOpacity'   => 0.7,
    'link'          => null   
      // px
])

<div class="col-sm-3">
     @if($link)
    <a href="{{ $link }}" class="text-decoration-none d-block">
  @endif
  <div class="card custom-card position-relative rounded-md overflow-hidden">
    <div class="card-body">
      <h5 class="mb-1ld">{{ $number }}</h5>
      <div class="fw-medium op-7">
        {{ $title }}
        @if($delta)
          <span class="fw-normal ms-1 badge {{ $deltaClass }} fs-9">
            {{ $delta }} <i class="ri-arrow-down-s-fill"></i>
          </span>
        @endif
      </div>

      {{-- Corner circle + icon (absolute positioned, inline styles only) --}}
      @if($iconClass)
        <div
          aria-hidden="true"
          style="
            position: absolute;
            right: -{{ intval($circleSize / 3) }}px;
            bottom: -{{ intval($circleSize / 3) }}px;
            width: {{ intval($circleSize) }}px;
            height: {{ intval($circleSize) }}px;
            border-radius: 50%;
            background: {{ $circleBg }};
            opacity: {{ $circleOpacity }};
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
          "
        >
          <i class="{{ $iconClass }}" style="font-size: {{ intval($iconSize) }}px; color: {{ $iconColor }}; opacity: {{ $iconOpacity }};"></i>
        </div>
      @endif

    </div>
  </div>
    @if($link)
    </a>
  @endif
</div>