/* ============================================================================
 * border-beam.css — base look for elements that use the Border Beam effect.
 *
 * The animated beam itself is injected by border-beam.js. This file only gives
 * the target elements a sensible opaque, rounded, dark base so the glow reads
 * (the beam needs a dark-ish, opaque surface underneath — same as the original).
 *
 * You do NOT have to use these classes: apply the beam to ANY element. These are
 * just ready-made looks for the three shipped presets so you can drop them into
 * a Laravel Blade view and go.
 * ========================================================================== */

/* --- md: card / panel -------------------------------------------------------
 * Use on a block element. Give it padding + your content. */
.beam-card {
  position: relative;
  background: linear-gradient(180deg, #17171a, #131315);
  color: #ececf1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;          /* the beam auto-follows this radius */
  padding: 18px 20px;
}

/* --- sm: button / chip ------------------------------------------------------
 * Use on a button or small pill element. */
.beam-button {
  position: relative;
  font: inherit;
  color: #ececf1;
  background: #202024;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;          /* pill; beam follows it */
  padding: 9px 26px;
  cursor: pointer;
}

/* --- line: input / search bar ----------------------------------------------
 * Use on a bar-shaped element; the beam travels along the bottom edge. */
.beam-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  color: #8a8a93;
  background: #161618;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

/* Optional: light-theme surfaces. Pair with theme:'light' when you create the
 * beam so the beam switches to its light palette to match. */
.beam-card.is-light,
.beam-line.is-light {
  background: #f4f4f6;
  color: #1a1a1e;
  border-color: rgba(0, 0, 0, 0.10);
}
.beam-button.is-light {
  background: #ffffff;
  color: #1a1a1e;
  border-color: rgba(0, 0, 0, 0.10);
}

/* The library appends this bloom node inside the element. Never remove it. */
[data-beam] > [data-beam-bloom] { pointer-events: none; }