Absolute Center Box

---
/**
 * CenterFixedBox — Absolute center box helper component.
 */
interface Props {
  className?: string;
}

const { className = '' } = Astro.props;
---

<div class={`abs-center-container ${className}`}>
  <div class="abs-center">
    <slot>
      <div class="abs-card">
        <h4>Centered Content</h4>
        <p>Centered cleanly in viewport or parent container.</p>
      </div>
    </slot>
  </div>
</div>

<style>
  .abs-center-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--r-lg, 12px);
    overflow: hidden;
    border: 1px dashed rgb(var(--ink-rgb, 255 255 255) / 0.15);
  }
  .abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
  }
  .abs-card {
    padding: 1.25rem 2rem;
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
    border-radius: 12px;
    text-align: center;
  }
  .abs-card h4 {
    margin: 0 0 0.25rem;
    color: #fff;
  }
  .abs-card p {
    margin: 0;
    font-size: 0.85rem;
    color: #94a3b8;
  }
</style>