/* Showcase profile card frame for owner user_id=1. */
.nf-profile-info-card.nf-profile-frame-showcase {
  --nf-frame-radius: calc(var(--nf-profile-radius, .7rem) + .16rem);
  --nf-frame-glow: rgba(75, 174, 190, .22);

  border: 13px solid transparent;
  border-radius: var(--nf-frame-radius);
  background-image:
    linear-gradient(var(--nf-profile-card-bg), var(--nf-profile-card-bg)),
    url("../images/profile-frames/sea-shell-tile.svg");
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-repeat: no-repeat, repeat;
  background-size: auto, 72px 72px;
  box-shadow:
    0 .18rem .55rem rgba(20, 84, 96, .08),
    0 0 0 1px rgba(255, 255, 255, .55) inset,
    0 0 0 .16rem var(--nf-frame-glow);
  isolation: isolate;
}

.nf-profile-info-card.nf-profile-frame-showcase::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(47, 139, 154, .28);
  border-radius: calc(var(--nf-frame-radius) - .32rem);
}

.nf-profile-info-card.nf-profile-frame-showcase::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 0;
  pointer-events: none;
  border-radius: calc(var(--nf-frame-radius) + .22rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 36%),
    linear-gradient(315deg, rgba(24, 104, 122, .14), rgba(24, 104, 122, 0) 42%);
}

.nf-profile-info-card.nf-profile-frame-showcase > .nf-profile-info-card-header,
.nf-profile-info-card.nf-profile-frame-showcase > .card-header,
.nf-profile-info-card.nf-profile-frame-showcase > .nf-profile-info-card-body,
.nf-profile-info-card.nf-profile-frame-showcase > .nf-profile-widget-content {
  position: relative;
  z-index: 1;
}

.nf-profile-info-card.nf-profile-frame-showcase > .nf-profile-info-card-body,
.nf-profile-info-card.nf-profile-frame-showcase.profile-start-widget > .nf-profile-widget-content {
  padding-top: .55rem;
}

.nf-profile-info-card.nf-profile-frame-showcase > .nf-profile-info-card-body {
  padding-top: 0;
}

.nf-profile-info-card.nf-profile-frame-showcase .nf-profile-info-card-title {
  box-shadow:
    0 0 0 .18rem var(--nf-profile-card-bg),
    0 .1rem .3rem rgba(20, 84, 96, .10);
}

.nf-profile-info-card.nf-profile-frame-showcase .nf-profile-card-edit {
  box-shadow:
    0 0 0 .14rem var(--nf-profile-card-bg),
    0 .1rem .28rem rgba(20, 84, 96, .12);
}

[data-bs-theme="dark"] .nf-profile-info-card.nf-profile-frame-showcase {
  --nf-frame-glow: rgba(109, 200, 214, .20);

  box-shadow:
    0 .24rem .7rem rgba(0, 0, 0, .2),
    0 0 0 1px rgba(255, 255, 255, .08) inset,
    0 0 0 .16rem var(--nf-frame-glow);
}

[data-bs-theme="dark"] .nf-profile-info-card.nf-profile-frame-showcase::before {
  border-color: rgba(124, 219, 230, .30);
}

@media (max-width: 767.98px) {
  .nf-profile-info-card.nf-profile-frame-showcase {
    border-width: 10px;
    background-size: auto, 60px 60px;
    box-shadow:
      0 .16rem .45rem rgba(20, 84, 96, .07),
      0 0 0 1px rgba(255, 255, 255, .45) inset,
      0 0 0 .11rem var(--nf-frame-glow);
  }

  .nf-profile-info-card.nf-profile-frame-showcase::before {
    inset: 2px;
  }

  .nf-profile-info-card.nf-profile-frame-showcase > .nf-profile-info-card-body,
  .nf-profile-info-card.nf-profile-frame-showcase.profile-start-widget > .nf-profile-widget-content {
    padding-top: .5rem;
  }

  .nf-profile-info-card.nf-profile-frame-showcase > .nf-profile-info-card-body {
    padding-top: 0;
  }
}