/* =========================================================
   MUSICBOXFRANK TELEGRAM ACCESS v3.9.9
   ========================================================= */

.frank-telegram-access {
  position: fixed;
  inset: 0;

  z-index: 10020;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(5, 8, 12, .76);

  backdrop-filter:
    blur(16px);
}

.frank-telegram-access[hidden] {
  display: none;
}

.frank-telegram-access-card {
  position: relative;

  width:
    min(430px, calc(100vw - 32px));

  padding:
    34px 30px 28px;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius: 22px;

  background:
    linear-gradient(
      155deg,
      rgba(24,29,37,.98),
      rgba(11,14,19,.98)
    );

  box-shadow:
    0 32px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.07);

  color:
    rgba(255,255,255,.94);

  font-family:
    Inter,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

.frank-telegram-access-close {
  position: absolute;

  top: 14px;
  right: 16px;

  width: 34px;
  height: 34px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    rgba(255,255,255,.05);

  color: inherit;

  font-size: 21px;

  cursor: pointer;
}

.frank-telegram-channel-mark {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  margin-bottom: 17px;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius: 16px;

  background:
    rgba(255,255,255,.055);

  font-size: 13px;
  font-weight: 800;

  letter-spacing: .14em;
}

.frank-telegram-channel-label {
  margin-bottom: 8px;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: .18em;

  opacity: .42;
}

.frank-telegram-access-title {
  margin: 0;

  font-size: 28px;
  font-weight: 650;

  line-height: 1.05;

  letter-spacing: -.025em;
}

.frank-telegram-access-subtitle {
  margin-top: 4px;

  font-size: 28px;
  font-weight: 350;

  line-height: 1.08;

  letter-spacing: -.025em;

  opacity: .70;
}

.frank-telegram-access-description {
  margin:
    18px 0 20px;

  max-width: 350px;

  font-size: 12px;
  font-weight: 400;

  line-height: 1.6;

  opacity: .55;
}

.frank-telegram-channel-card {
  display: flex;
  align-items: center;

  gap: 12px;

  padding: 12px;

  margin-bottom: 12px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 14px;

  background:
    rgba(255,255,255,.035);
}

.frank-telegram-channel-avatar {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background:
    rgba(255,255,255,.09);

  font-size: 13px;
  font-weight: 800;
}

.frank-telegram-channel-info {
  min-width: 0;

  display: flex;
  flex-direction: column;

  flex: 1;
}

.frank-telegram-channel-info strong {
  font-size: 12px;
  font-weight: 650;

  letter-spacing: .03em;
}

.frank-telegram-channel-info span {
  margin-top: 2px;

  font-size: 9px;

  opacity: .42;
}

.frank-telegram-channel-status {
  font-size: 7px;
  font-weight: 700;

  letter-spacing: .12em;

  opacity: .34;
}

.frank-telegram-access-track {
  display: flex;
  flex-direction: column;

  gap: 4px;

  padding:
    10px 2px 16px;
}

.frank-telegram-access-track span {
  font-size: 7px;
  font-weight: 700;

  letter-spacing: .16em;

  opacity: .32;
}

.frank-telegram-access-track strong {
  overflow: hidden;

  font-size: 11px;
  font-weight: 550;

  white-space: nowrap;
  text-overflow: ellipsis;

  opacity: .72;
}

.frank-telegram-open,
.frank-telegram-confirm {
  width: 100%;
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  font-family: inherit;

  font-size: 9px;
  font-weight: 750;

  letter-spacing: .13em;

  text-decoration: none;

  cursor: pointer;
}

.frank-telegram-open {
  border:
    1px solid rgba(255,255,255,.16);

  background:
    rgba(255,255,255,.92);

  color:
    rgba(10,13,18,.96);
}

.frank-telegram-confirm {
  margin-top: 8px;

  border:
    1px solid rgba(255,255,255,.11);

  background:
    rgba(255,255,255,.045);

  color: inherit;
}

.frank-telegram-open:hover,
.frank-telegram-confirm:hover {
  filter: brightness(1.08);
}

.frank-telegram-access-note {
  margin-top: 12px;

  text-align: center;

  font-size: 8px;
  line-height: 1.5;

  letter-spacing: .04em;

  opacity: .30;
}

@media (max-width: 520px) {
  .frank-telegram-access {
    padding: 16px;
  }

  .frank-telegram-access-card {
    padding:
      30px 20px 22px;
  }

  .frank-telegram-access-title,
  .frank-telegram-access-subtitle {
    font-size: 24px;
  }
}