/* ============================================================
   Glass Banner — Glassmorphism / Frost effect
   ============================================================ */

/* ── Wrapper (holds the background image) ── */
.gb-banner-wrapper {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* ── Noise grain overlay for realistic frost texture ── */
.gb-banner-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* ── Glass panel ── */
.gb-glass-panel {
  --gb-blur:   12px;
  --gb-tint:   rgba(255,255,255,0.20);
  --gb-border: rgba(255,255,255,0.30);
  --gb-radius: 16px;

  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: var(--gb-radius);

  /* Core glassmorphism */
  background: var(--gb-tint);
  backdrop-filter: blur(var(--gb-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--gb-blur)) saturate(180%);

  /* Frosted border — inner highlight */
  border: 1px solid var(--gb-border);

  /* Depth shadow */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.06);

  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: backdrop-filter 0.3s ease, background 0.3s ease;
}

/* Specular sheen (top-left highlight streak) */
.gb-glass-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  border-radius: var(--gb-radius) var(--gb-radius) 80% 80% / var(--gb-radius) var(--gb-radius) 30% 30%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.00) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Inner content area ── */
.gb-inner-content {
  position: relative;
  z-index: 3;
  width: 100%;
  color: inherit;
}

.gb-inner-content > * {
  margin-top: 0;
}

/* ── Editor preview ── */
.editor-styles-wrapper .gb-banner-wrapper {
  min-height: 300px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .gb-banner-wrapper {
    padding: 24px !important;
    border-radius: 12px !important;
  }
}