/* ============================================================
   TIVEZ PRO
   MARMOOLAK V6.1 — SIGNATURE SYSTEM

   BRAND DIRECTION:
   MIDNIGHT GRAPHITE
   ELECTRIC ICE
   ICE WHITE
   GOLD ONLY ON CHARACTER JEWELRY
   ============================================================ */

:root{
  --mm-bg-0:#070a0d;
  --mm-bg-1:#0b1115;
  --mm-bg-2:#180f27;

  --mm-cyan:#c9a8ff;
  --mm-cyan-2:#9b5cf6;
  --mm-cyan-soft:rgba(201,168,255,.15);

  --mm-white:#f7fbfc;
  --mm-text:#e9f1f3;
  --mm-muted:#9b5cf6;

  --mm-line:rgba(201,168,255,.20);
  --mm-line-hot:rgba(201,168,255,.42);

  --mm-gold:#d7b06a;
}


/* ============================================================
   CHARACTER
   ============================================================ */

.mm6-character{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;

  filter:
    drop-shadow(0 5px 10px rgba(0,0,0,.58));
}

.mm6-character .mm61-eye{
  transform-box:fill-box;
  transform-origin:center;
  animation:mm61Blink 7.2s infinite;
}

@keyframes mm61Blink{
  0%,52%,54%,92%,94%,100%{transform:scaleY(1)}
  53%,93%{transform:scaleY(.12)}
}


/* ============================================================
   HOME FLOATING SIGNATURE TAB
   ============================================================ */

#tivezGuideRoot .tg-launcher{
  isolation:isolate;

  border:
    1px solid rgba(201,168,255,.28)!important;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(201,168,255,.13),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #1a1229,
      #0b161a 55%,
      #070b0e
    )!important;

  box-shadow:
    0 18px 46px rgba(0,0,0,.48),
    0 0 25px rgba(155,92,246,.09),
    inset 0 1px 0 rgba(255,255,255,.055)!important;

  overflow:hidden!important;
}

#tivezGuideRoot .tg-launcher:before{
  content:"";
  position:absolute;
  inset:-60%;

  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(201,168,255,.13),
      transparent 22%
    );

  animation:mm61Orbit 8s linear infinite;

  z-index:-1;
}

@keyframes mm61Orbit{
  to{transform:rotate(360deg)}
}

#tivezGuideRoot .tg-character{
  width:84%!important;
  height:84%!important;
}


/* ============================================================
   LARGE GUIDE PANEL
   ============================================================ */

#tivezGuideRoot .tg-panel{
  border:
    1px solid rgba(201,168,255,.22)!important;

  background:
    radial-gradient(
      circle at 86% -8%,
      rgba(155,92,246,.17),
      transparent 38%
    ),
    radial-gradient(
      circle at -10% 108%,
      rgba(107,63,184,.10),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(13,27,32,.988),
      rgba(8,13,17,.994) 58%,
      rgba(6,8,10,.997)
    )!important;

  box-shadow:
    0 35px 110px rgba(0,0,0,.66),
    0 0 38px rgba(155,92,246,.055),
    inset 0 1px rgba(255,255,255,.045)!important;

  backdrop-filter:
    blur(28px) saturate(128%)!important;

  -webkit-backdrop-filter:
    blur(28px) saturate(128%)!important;
}


#tivezGuideRoot .tg-panel-head{
  background:
    linear-gradient(
      180deg,
      rgba(19,44,50,.63),
      rgba(12,23,28,.46)
    )!important;

  border-bottom:
    1px solid rgba(201,168,255,.12)!important;
}


#tivezGuideRoot .tg-mini-avatar{
  border:
    1px solid rgba(201,168,255,.24)!important;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(201,168,255,.10),
      transparent 38%
    ),
    #091013!important;

  box-shadow:
    0 9px 25px rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.04)!important;
}


#tivezGuideRoot .tg-head-copy b,
#tivezGuideRoot .tg-title{
  color:#f5fbfc!important;

  font-weight:900!important;

  letter-spacing:-.35px!important;
}


#tivezGuideRoot .tg-context{
  color:#c9a8ff!important;

  font-weight:760!important;
}


#tivezGuideRoot .tg-message{
  color:#c9a8ff!important;

  font-size:11px!important;
  line-height:2.08!important;
}


#tivezGuideRoot .tg-action{
  border:
    1px solid rgba(201,168,255,.13)!important;

  background:
    linear-gradient(
      145deg,
      rgba(21,53,58,.23),
      rgba(9,16,19,.74)
    )!important;

  color:#d4c2ff!important;
}


#tivezGuideRoot .tg-action.primary{
  border-color:
    rgba(201,168,255,.52)!important;

  background:
    linear-gradient(
      112deg,
      #d4c2ff,
      #c9a8ff
    )!important;

  color:#071012!important;

  box-shadow:
    0 13px 34px rgba(155,92,246,.12),
    inset 0 1px rgba(255,255,255,.48)!important;
}


/* ============================================================
   CHECKOUT INLINE SIGNATURE CARD
   SAME POSITION — NEW IDENTITY
   ============================================================ */

.tg-inline-guide{
  position:relative!important;
  isolation:isolate!important;

  grid-template-columns:
    68px minmax(0,1fr) 42px!important;

  align-items:center!important;

  gap:14px!important;

  min-height:118px!important;

  padding:
    14px 16px!important;

  border:
    1px solid rgba(201,168,255,.25)!important;

  border-radius:
    23px!important;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(155,92,246,.17),
      transparent 37%
    ),
    linear-gradient(
      128deg,
      #1a1229 0%,
      #0b171b 52%,
      #080b0e 100%
    )!important;

  box-shadow:
    0 17px 50px rgba(0,0,0,.36),
    inset 0 1px rgba(255,255,255,.052),
    0 0 26px rgba(155,92,246,.04)!important;

  overflow:hidden!important;
}


.tg-inline-guide:before{
  content:"";

  position:absolute;

  top:13px;
  right:0;
  bottom:13px;

  width:3px;

  border-radius:10px;

  background:
    linear-gradient(
      180deg,
      #c9a8ff,
      #9b5cf6 58%,
      rgba(155,92,246,.04)
    );

  box-shadow:
    0 0 15px rgba(201,168,255,.24);
}


/* ============================================================
   AVATAR CAPSULE
   ============================================================ */

.tg-inline-avatar{
  width:64px!important;
  height:78px!important;

  display:grid!important;
  place-items:center!important;

  align-self:center!important;

  border-radius:
    20px!important;

  border:
    1px solid rgba(201,168,255,.27)!important;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(201,168,255,.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #1c142f,
      #091013
    )!important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 10px 27px rgba(0,0,0,.30),
    0 0 19px rgba(155,92,246,.055)!important;

  overflow:hidden!important;
}


.tg-inline-avatar .mm6-character{
  width:58px!important;
  height:70px!important;
}


/* ============================================================
   INLINE TYPOGRAPHY
   ============================================================ */

.tg-inline-content{
  min-width:0!important;

  display:flex!important;
  flex-direction:column!important;

  align-items:flex-start!important;
  justify-content:center!important;

  padding:
    1px 1px!important;

  text-align:right!important;

  direction:rtl!important;
}


.tg-inline-meta{
  display:flex!important;

  align-items:center!important;

  gap:7px!important;

  margin-bottom:5px!important;

  color:#c9a8ff!important;

  font-size:
    9px!important;

  font-weight:
    800!important;

  line-height:
    1.5!important;
}


.tg-inline-live{
  width:
    6px!important;

  height:
    6px!important;

  background:
    #c9a8ff!important;

  box-shadow:
    0 0 0 4px rgba(201,168,255,.06),
    0 0 13px rgba(201,168,255,.25)!important;
}


#tgInlineTitle{
  display:block!important;

  width:100%!important;

  margin:0!important;

  color:
    #f5fafb!important;

  font-size:
    16px!important;

  font-weight:
    900!important;

  line-height:
    1.58!important;

  letter-spacing:
    -.42px!important;

  text-wrap:
    balance!important;
}


#tgInlineText{
  display:block!important;

  width:100%!important;

  margin-top:
    3px!important;

  color:
    #9b5cf6!important;

  font-size:
    10.5px!important;

  font-weight:
    510!important;

  line-height:
    1.92!important;
}


/* ============================================================
   EXPAND CONTROL
   ============================================================ */

.tg-inline-open{
  width:
    38px!important;

  height:
    38px!important;

  display:grid!important;
  place-items:center!important;

  border-radius:
    13px!important;

  border:
    1px solid rgba(201,168,255,.18)!important;

  background:
    rgba(155,92,246,.035)!important;

  color:
    #c9a8ff!important;

  font-size:
    0!important;
}


.tg-inline-open:before{
  content:"⌄";

  font:
    500 20px/1 Arial,sans-serif;
}


.tg-inline-guide[aria-expanded="true"] .tg-inline-open:before,
.tg-inline-guide.is-expanded .tg-inline-open:before{
  content:"⌃";
}


/* ============================================================
   EXPANDED CONTENT
   ============================================================ */

.tg-inline-guide .tg-inline-extra,
.tg-inline-guide .tg-inline-detail,
.tg-inline-guide .tg-inline-expanded{
  border-top:
    1px solid rgba(201,168,255,.10)!important;

  color:
    #9b5cf6!important;
}


/* ============================================================
   GLOBAL TYPE SAFETY
   ============================================================ */

.tg-inline-guide,
#tivezGuideRoot .tg-panel{
  font-family:
    "Vazirmatn",
    "IRANSansX",
    Tahoma,
    Arial,
    sans-serif!important;

  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;
}


.tg-inline-guide *,
#tivezGuideRoot .tg-panel *{
  box-sizing:
    border-box;

  word-break:
    normal;

  overflow-wrap:
    normal;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:640px){

  .tg-inline-guide{
    grid-template-columns:
      60px minmax(0,1fr) 38px!important;

    gap:
      10px!important;

    min-height:
      106px!important;

    padding:
      12px 12px!important;

    border-radius:
      21px!important;
  }

  .tg-inline-avatar{
    width:
      57px!important;

    height:
      68px!important;

    border-radius:
      17px!important;
  }

  .tg-inline-avatar .mm6-character{
    width:
      52px!important;

    height:
      63px!important;
  }

  #tgInlineTitle{
    font-size:
      14.4px!important;

    line-height:
      1.62!important;
  }

  #tgInlineText{
    font-size:
      9.55px!important;

    line-height:
      1.88!important;
  }

  .tg-inline-meta{
    font-size:
      8.2px!important;
  }

}


@media(max-width:370px){

  .tg-inline-guide{
    grid-template-columns:
      52px minmax(0,1fr) 35px!important;

    gap:
      8px!important;

    padding:
      10px!important;
  }

  .tg-inline-avatar{
    width:
      50px!important;

    height:
      61px!important;
  }

  #tgInlineTitle{
    font-size:
      13.4px!important;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .mm6-character .mm61-eye,
  #tivezGuideRoot .tg-launcher:before{
    animation:none!important;
  }

}