/* ============================================================
   TGStock Moderator Trial
   Integrated PRO checkout
   ============================================================ */


/* Старый большой баннер больше не используется */
.tgtrial {
  display: none !important;
}


/* ------------------------------------------------------------
   BADGE В КАРТОЧКЕ PRO
   ------------------------------------------------------------ */

.moderator-trial-plan-badge {
  display: flex;
  flex-direction: column;
  gap: 3px;

  width: fit-content;

  margin:
    2px
    0
    16px;

  padding:
    8px
    10px;

  border:
    1px solid
    rgba(128, 96, 255, .27);

  border-radius:
    10px;

  background:
    rgba(111, 75, 255, .08);
}


.moderator-trial-plan-badge strong {
  color:
    #b3a2ff;

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    .01em;
}


.moderator-trial-plan-badge span {
  color:
    rgba(220, 220, 232, .46);

  font-size:
    9px;

  line-height:
    1.25;
}


/* ------------------------------------------------------------
   ПРОБНЫЙ PRO В CHECKOUT
   ------------------------------------------------------------ */

.moderator-trial-checkout-note {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin:
    17px
    0
    12px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(126, 94, 255, .20);

  border-radius:
    11px;

  background:
    rgba(113, 77, 255, .055);
}


.moderator-trial-checkout-note > span {
  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

  flex:
    0 0
    28px;

  border-radius:
    9px;

  background:
    rgba(116, 81, 255, .12);

  color:
    #9d88ff;

  font-size:
    12px;
}


.moderator-trial-checkout-note div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.moderator-trial-checkout-note strong {
  color:
    rgba(250, 250, 253, .92);

  font-size:
    11px;

  line-height:
    1.2;
}


.moderator-trial-checkout-note small {
  color:
    rgba(220, 220, 230, .47);

  font-size:
    9px;

  line-height:
    1.35;
}


/* Trial period */

.moderator-subscription-trial {
  position:
    relative;

  overflow:
    hidden;

  border-color:
    rgba(125, 93, 255, .50)
    !important;

  background:
    rgba(113, 76, 255, .075)
    !important;
}


.moderator-subscription-trial::after {
  content:
    "TRIAL";

  position:
    absolute;

  top:
    5px;

  right:
    6px;

  color:
    rgba(166, 145, 255, .55);

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .08em;
}


.moderator-subscription-trial strong,
.moderator-subscription-trial span {
  display:
    block;
}


.moderator-subscription-trial strong {
  font-size:
    11px;
}


.moderator-subscription-trial span {
  margin-top:
    3px;

  color:
    #a994ff;

  font-size:
    10px;

  font-weight:
    800;
}


.moderator-subscription-trial.is-active {
  border-color:
    #7657ef
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(111, 76, 239, .26),
      rgba(89, 58, 194, .16)
    )
    !important;

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(128, 99, 255, .12);
}


/* ------------------------------------------------------------
   TRIAL BUY BUTTON
   ------------------------------------------------------------ */

.moderator-trial-buy {
  background:
    linear-gradient(
      135deg,
      #6e50ee,
      #8062ff
    )
    !important;

  box-shadow:
    0
    10px
    30px
    rgba(87, 55, 211, .20);
}


.moderator-trial-buy[hidden],
.moderator-subscription-buy[hidden] {
  display:
    none
    !important;
}


/* ------------------------------------------------------------
   TOAST ПОСЛЕ ЮKASSA
   ------------------------------------------------------------ */

.moderator-trial-toast {
  position:
    fixed;

  z-index:
    99999;

  top:
    22px;

  left:
    50%;

  transform:
    translateX(-50%);

  min-width:
    260px;

  max-width:
    calc(100vw - 32px);

  padding:
    13px
    17px;

  border:
    1px solid
    rgba(126, 95, 255, .28);

  border-radius:
    12px;

  background:
    rgba(20, 20, 29, .97);

  color:
    rgba(250, 250, 253, .90);

  font-size:
    12px;

  font-weight:
    700;

  text-align:
    center;

  box-shadow:
    0
    16px
    50px
    rgba(0, 0, 0, .40);

  backdrop-filter:
    blur(14px);
}


.moderator-trial-toast.is-success {
  border-color:
    rgba(72, 210, 145, .30);

  color:
    #7de2ae;
}


.moderator-trial-toast.is-error {
  border-color:
    rgba(255, 110, 110, .30);

  color:
    #ff9a9a;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (
  max-width:
  650px
) {

  .moderator-trial-checkout-note {
    margin-top:
      14px;
  }

  .moderator-trial-toast {
    top:
      14px;
  }

}


/* ============================================================
   TGSTOCK CLEAN TRIAL UI V3
   ============================================================ */


/* checkout немного компактнее */
.moderator-subscription-dialog {
  width:
    min(500px, calc(100vw - 32px))
    !important;

  padding:
    28px
    !important;
}


/* ------------------------------------------------------------
   TRIAL OFFER
   ------------------------------------------------------------ */

.moderator-trial-offer {
  display:
    grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    12px;

  width:
    100%;

  margin:
    20px
    0
    0;

  padding:
    13px
    14px;

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

  border-radius:
    13px;

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

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}


.moderator-trial-offer[hidden] {
  display:
    none
    !important;
}


.moderator-trial-offer:hover {
  border-color:
    rgba(126, 96, 255, .35);

  background:
    rgba(112, 78, 255, .045);
}


.moderator-trial-offer.is-active {
  border-color:
    rgba(126, 94, 255, .72);

  background:
    linear-gradient(
      135deg,
      rgba(113, 79, 247, .12),
      rgba(103, 72, 220, .045)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(126, 96, 255, .05);
}


/* icon */

.moderator-trial-offer-icon {
  display:
    grid;

  place-items:
    center;

  width:
    36px;

  height:
    36px;

  border-radius:
    10px;

  background:
    rgba(116, 82, 255, .12);

  color:
    #a893ff;

  font-size:
    13px;
}


/* copy */

.moderator-trial-offer-copy {
  display:
    flex;

  min-width:
    0;

  flex-direction:
    column;

  gap:
    4px;
}


.moderator-trial-offer-copy strong {
  color:
    rgba(250,250,253,.94);

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.2;
}


.moderator-trial-offer-copy small {
  color:
    rgba(220,220,232,.46);

  font-size:
    10px;

  line-height:
    1.3;
}


/* price */

.moderator-trial-offer-price {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    3px;

  padding-left:
    12px;
}


.moderator-trial-offer-price strong {
  color:
    #fff;

  font-size:
    18px;

  font-weight:
    850;

  line-height:
    1;
}


.moderator-trial-offer-price small {
  color:
    rgba(220,220,232,.38);

  font-size:
    9px;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   DIVIDER
   ------------------------------------------------------------ */

.moderator-subscription-divider {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin:
    17px
    0
    10px;

  color:
    rgba(220,220,232,.34);

  font-size:
    9px;

  line-height:
    1;
}


.moderator-subscription-divider[hidden] {
  display:
    none
    !important;
}


.moderator-subscription-divider::before,
.moderator-subscription-divider::after {
  content:
    "";

  height:
    1px;

  flex:
    1;

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


.moderator-subscription-divider span {
  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   4 НОРМАЛЬНЫХ ПЕРИОДА
   ------------------------------------------------------------ */

.moderator-subscription-periods {
  display:
    grid
    !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr))
    !important;

  gap:
    8px
    !important;

  margin:
    0
    !important;
}


.moderator-subscription-period {
  width:
    auto
    !important;

  min-width:
    0
    !important;

  height:
    46px;

  padding:
    0
    8px
    !important;

  font-size:
    10px
    !important;
}


/* ------------------------------------------------------------
   TOTAL
   ------------------------------------------------------------ */

.moderator-subscription-total {
  margin-top:
    23px
    !important;

  font-size:
    21px
    !important;
}


/* убираем лишнюю высоту пустого status */
.moderator-subscription-status:empty {
  display:
    none;
}


.moderator-subscription-status {
  margin-top:
    10px
    !important;
}


/* ------------------------------------------------------------
   BUY
   ------------------------------------------------------------ */

.moderator-subscription-buy {
  margin-top:
    19px
    !important;

  min-height:
    49px;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (
  max-width:
  600px
) {

  .moderator-subscription-dialog {
    padding:
      21px
      !important;
  }


  .moderator-trial-offer {
    grid-template-columns:
      34px
      minmax(0, 1fr)
      auto;

    gap:
      9px;

    padding:
      12px;
  }


  .moderator-trial-offer-icon {
    width:
      32px;

    height:
      32px;
  }


  .moderator-trial-offer-copy small {
    max-width:
      190px;
  }


  .moderator-subscription-periods {
    grid-template-columns:
      repeat(2, minmax(0, 1fr))
      !important;
  }

}