/* mdc.css - "Pirkti kreditus" (pages_modules/mdc_widget.php, js/mdc.js).
   Kraunamas TIK kai valdiklis rodomas; mu.css nekeiciamas.

   Dvi dalys:
   1) SKYDELIS puslapyje (#mdc): pavadinimas, likutis ir VIENAS mygtukas "Pirkti kreditus".
      Selektoriai prasideda #bodyarea #colC #mdc (3 id): mu.css turi sunkiu taisykliu
      (#bodyarea #colC .pnl-b button 2,1,1; .pnl-b div{color:inherit}; line-height:normal).
      Spalvos - MU svetaines (muhobby) paletes: auksas #FFD700 / #FFD24A, juodas tekstas,
      remelis #749493.
   2) LANGAS (#mdcM), kuri mdc.js perkelia tiesiai i <body>: SWGC parduotuves lango kalba
      (/unboxing/buycoins.css - tamsus suapvalintas langas ant pritemdyto puslapio, antraste su
      moneta, kaireje paketu sarasas, desineje "Tavo uzsakymas"), bet savos .mdc-m-* klases -
      buycoins.css bendras ir nekeiciamas. Nauju sriftu svetaine nekrauna: sisteminis srifto
      rinkinys, kaip SWGC langas be Inter. Telefone (<= 800px) - lapas is apacios.
   2026-09-26 (mdc-modal-fix): kiekvienoje eiluteje antra eilute + SWGC auksinis uzpildas (::before),
   SWGC tarpai suvestineje, pranesimas virs PayPal mygtuko, 400 ms po atidarymo PayPal mygtukas
   nespaudziamas (.is-opening), zemas ekranas (<= 420px aukscio) - kompaktiska antraste,
   skydelio eilute "Mokejimas dar tvirtinamas - perziureti" (.mdc-bar-note). */

/* ======================================================================= 1. SKYDELIS */
#bodyarea #colC #mdc [hidden]{ display: none !important; }
#bodyarea #colC #mdc.mdc--bare,
#mdc.mdc--bare{ display: none !important; }

#bodyarea #colC #mdc{
  margin: 0 0 2px 0; padding: 12px 14px;
  border: 1px solid #749493; background: rgba(0, 0, 0, .14);
  text-align: left; color: #000000;
  font: 11px/1.5 Tahoma, Verdana, sans-serif; letter-spacing: normal;
}
#bodyarea #colC #mdc p{ margin: 0; }
#bodyarea #colC #mdc .mdc-bar{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#bodyarea #colC #mdc .mdc-coin{
  position: relative; flex: 0 0 auto; box-sizing: border-box; width: 38px; height: 38px;
  border: 1px solid rgba(255, 210, 74, .6); border-radius: 50%; background: #2A2A2A;
}
#bodyarea #colC #mdc .mdc-coin::before{
  content: ''; position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px;
  border: 2px solid #FFD24A; border-radius: 50%;
}
#bodyarea #colC #mdc .mdc-coin::after{
  content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -5.5px 0 0 -5.5px;
  border: 2px solid #FFD24A; transform: rotate(45deg);
}
#bodyarea #colC #mdc .mdc-bar-t{ flex: 1 1 200px; min-width: 0; }
#bodyarea #colC #mdc .mdc-title{ color: #FFD700; font: bold 13px/1.3 Tahoma, Verdana, sans-serif; margin: 0 0 2px 0; }
#bodyarea #colC #mdc .mdc-bar-l{ color: #000000; font: 11px/1.45 Tahoma, Verdana, sans-serif; }
#bodyarea #colC #mdc .mdc-bar-l b{ color: #000000; font-weight: bold; white-space: nowrap; }
#bodyarea #colC #mdc .mdc-bar-note{
  display: inline; box-sizing: border-box; width: auto; height: auto; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; text-shadow: none; text-align: left;
  color: #000000; font: bold 11px/1.45 Tahoma, Verdana, sans-serif; letter-spacing: normal; text-transform: none;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
#bodyarea #colC #mdc .mdc-bar-note::before{
  content: ''; display: inline-block; box-sizing: border-box; width: 8px; height: 8px; margin: 0 6px 0 0;
  border: 2px solid #1C1500; border-radius: 50%; border-top-color: transparent; vertical-align: -1px;
}
#bodyarea #colC #mdc .mdc-bar-note:hover{ color: #1C1500; background: none; text-decoration: none; }
#bodyarea #colC #mdc .mdc-bar-note:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }
#bodyarea #colC #mdc .mdc-cta{
  flex: 0 0 auto; box-sizing: border-box; width: auto; height: auto; min-height: 38px; margin: 0; padding: 10px 24px;
  background: linear-gradient(#FFE27A, #F2BE2E); border: 1px solid #9C7A16; border-radius: 0;
  color: #1C1500; font: bold 13px/16px Tahoma, Verdana, sans-serif; letter-spacing: normal; text-transform: uppercase;
  text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 0, 0, .35);
  cursor: pointer; white-space: nowrap;
}
#bodyarea #colC #mdc .mdc-cta:hover{ background: linear-gradient(#FFEB9E, #F7CB4D); color: #000000; }
#bodyarea #colC #mdc .mdc-cta:active{ background: linear-gradient(#F2BE2E, #FFE27A); }
#bodyarea #colC #mdc .mdc-cta:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }
#bodyarea #colC #mdc .mdc-msg{
  display: block; margin: 8px 0 0 0; padding: 6px 10px;
  background: #2A2A2A; border: 1px solid #749493; color: #FFFFFF; font: 12px/1.45 Tahoma, Verdana, sans-serif; text-align: center;
}

/* ---- skirtukas tarp euro skydelio ir SWGC skyriu ----
   Tik uzrasas: linija po juo - pirmojo .mu-sec border-top (jis nebe :first-child). */
#bodyarea #colC .mdc-or{
  display: block; margin: 16px 0 0 0; color: #FFD700; text-align: center;
  font: bold 11px/1.3 Tahoma, Verdana, sans-serif;
}

/* ---- telefonas (mu.css telefono riba - 800px) ---- */
@media (max-width: 800px){
  #bodyarea #colC #mdc{ padding: 12px 12px; font-size: 13px; }
  #bodyarea #colC #mdc .mdc-title{ font-size: 15px; }
  #bodyarea #colC #mdc .mdc-bar-l{ font-size: 13px; }
  #bodyarea #colC #mdc .mdc-bar-note{ font-size: 13px; }
  #bodyarea #colC #mdc .mdc-cta{ flex: 1 1 100%; min-height: 46px; font-size: 15px; line-height: 20px; }
  #bodyarea #colC #mdc .mdc-msg{ font-size: 14px; }
  #bodyarea #colC .mdc-or{ font-size: 13px; }
}

/* ---- [Servisai]: [Kreditu papildymas] skydelis (pages_modules/servisai.php) ----
   Siauras desinys stulpelis (.mh-sub-b 332px): mygtukas per visa ploti po likucio eilute.
   Skirtukas ir SWGC dalis (.sv-swgc) - kaip Paramoje. Tik #bodyarea.page-servisai. */
@media (min-width: 801px){
  #bodyarea.page-servisai #colC #mdc{ margin: 2px 0 0 0; padding: 11px 12px; }
  #bodyarea.page-servisai #colC #mdc .mdc-cta{ flex: 1 1 100%; }
  #bodyarea.page-servisai #colC .mdc-or{ margin: 14px 0 0 0; }
  #bodyarea.page-servisai #colC .sv-swgc{ margin: 14px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid rgba(255, 255, 255, .22); }
}
@media (max-width: 800px){
  #bodyarea.page-servisai #colC .mdc-or{ margin: 14px 0 0 0; }
  #bodyarea.page-servisai #colC .sv-swgc{ margin: 14px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid rgba(255, 255, 255, .22); }
}

/* ========================================================================= 2. LANGAS */
html.mdc-m-lock,
html.mdc-m-lock body{ overflow: hidden !important; }

#mdcM[hidden],
#mdcM [hidden]{ display: none !important; }
#mdcM{
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(5, 7, 11, .84);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #F3F4F6; text-align: left; letter-spacing: 0; text-shadow: none;
  font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
#mdcM *, #mdcM *::before, #mdcM *::after{ box-sizing: border-box; letter-spacing: 0; }
#mdcM .mdc-m-dialog{
  position: relative; width: 850px; max-width: 100%;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain;
  background: #16191E; border: 1px solid #44464C; border-radius: 16px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .6); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; outline: none;
}
#mdcM[data-state="login"] .mdc-m-dialog,
#mdcM[data-state="done"] .mdc-m-dialog,
#mdcM[data-state="paid"] .mdc-m-dialog{ width: 540px; }
#mdcM .mdc-m-dialog.is-nudge{ animation: mdcNudge .36s ease; }
@keyframes mdcNudge{ 0%, 100%{ transform: none; } 25%{ transform: translateX(-6px); } 75%{ transform: translateX(6px); } }
#mdcM .mdc-m-sentinel{ position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
#mdcM.is-opening #mdcPayBtns{ pointer-events: none; }
#mdcM button:focus-visible,
#mdcM a:focus-visible{ outline: 2px solid #7FD9E4; outline-offset: 3px; }

/* ---- antraste ---- */
#mdcM .mdc-m-head{
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 44px; align-items: center; gap: 16px;
  padding: 26px; border-bottom: 1px solid #34383F; background: #16191E; border-radius: 16px 16px 0 0;
}
#mdcM .mdc-m-coin{ position: relative; width: 46px; height: 46px; border: 1px solid rgba(247, 207, 112, .3); border-radius: 50%; background: rgba(247, 207, 112, .063); }
#mdcM .mdc-m-coin::before{ content: ''; position: absolute; top: 9px; right: 9px; bottom: 9px; left: 9px; border: 2px solid #F7CF70; border-radius: 50%; }
#mdcM .mdc-m-coin::after{
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -6.5px 0 0 -6.5px;
  border: 2px solid #F7CF70; transform: rotate(45deg);
}
#mdcM .mdc-m-heading{ min-width: 0; }
#mdcM .mdc-m-eyebrow{ display: block; font-size: 10px; line-height: 14px; font-weight: 600; color: #F7CF70; }
#mdcM h2{
  margin: 4px 0; padding: 0; border: 0; background: none; text-transform: none;
  font: 700 24px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #F3F4F6;
}
#mdcM .mdc-m-head p{ margin: 0; font-size: 12px; line-height: 18px; color: #AEB6C2; }
#mdcM .mdc-m-head p b{ color: #F3F4F6; font-weight: 600; }
#mdcM .mdc-m-x{
  position: relative; width: 44px; height: 44px; min-width: 0; min-height: 44px; margin: 0; padding: 0;
  border: 1px solid #34383F; border-radius: 12px; background: rgba(255, 255, 255, .016);
  color: #AEB6C2; cursor: pointer; box-shadow: none; font: inherit;
}
#mdcM .mdc-m-x span::before,
#mdcM .mdc-m-x span::after{
  content: ''; position: absolute; top: 20px; left: 13px; width: 16px; height: 2px;
  background: currentColor; transform: rotate(45deg);
}
#mdcM .mdc-m-x span::after{ transform: rotate(-45deg); }
#mdcM .mdc-m-x:hover{ background: rgba(255, 255, 255, .047); color: #FFFFFF; }
#mdcM .mdc-m-x.is-blocked{ opacity: .35; cursor: not-allowed; }
#mdcM .mdc-m-x.is-blocked:hover{ background: rgba(255, 255, 255, .016); color: #AEB6C2; }

/* ---- turinys: paketai | uzsakymas ---- */
#mdcM .mdc-m-layout{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
#mdcM .mdc-m-picker{ min-width: 0; padding: 24px 26px 28px; }
#mdcM .mdc-m-sect{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px 0;
  font-size: 12px; line-height: 18px; font-weight: 600; color: #F3F4F6;
}
#mdcM .mdc-m-sect small{ font-size: 11px; font-weight: 500; color: #AEB6C2; }

#mdcM .mdc-packs{ display: grid; gap: 8px; margin: 0; padding: 0; }
#mdcM .mdc-pack{
  position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 64px; margin: 0; padding: 11px 13px;
  border: 1px solid #34383F; border-radius: 8px; background: rgba(255, 255, 255, .012);
  color: #F3F4F6; text-align: left; cursor: pointer; font-size: 14px; line-height: 20px;
  isolation: isolate; overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease;
  -webkit-user-select: none; user-select: none;
}
#mdcM .mdc-pack::before{
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
  background: rgba(247, 207, 112, .04); opacity: 0; transform: translateX(-15%);
  transition: opacity .18s ease, transform .2s ease;
}
/* hover tik su pele: telefone "prilipes" hover po bakstelejimo atrodytu kaip pasirinkimas */
@media (hover: hover){
  #mdcM .mdc-pack:hover{ border-color: #777572; }
  #mdcM .mdc-pack:hover::before{ opacity: 1; transform: none; }
}
#mdcM .mdc-pack.is-selected{ border-color: #D1AD58; background: rgba(247, 207, 112, .031); }
#mdcM .mdc-pack.is-selected::before{ opacity: 1; transform: none; }
#mdcM .mdc-pack:has(> .mdc-pack-in:focus-visible){ outline: 2px solid #7FD9E4; outline-offset: 2px; }
#mdcM .mdc-pack-in{
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0;
}
#mdcM .mdc-pack-radio{ position: relative; width: 18px; height: 18px; border: 1px solid #777F8A; border-radius: 50%; }
#mdcM .mdc-pack.is-selected .mdc-pack-radio{ border-color: #F7CF70; }
#mdcM .mdc-pack.is-selected .mdc-pack-radio::after{
  content: ''; position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px; border-radius: 50%; background: #F7CF70;
}
#mdcM .mdc-pack-copy{ display: grid; gap: 4px; min-width: 0; }
#mdcM .mdc-pack-l1{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
#mdcM .mdc-pack-amt{ display: block; font-size: 16px; line-height: 20px; color: #F3F4F6; white-space: nowrap; }
#mdcM .mdc-pack-cr{ font-weight: 700; font-variant-numeric: tabular-nums; }
#mdcM .mdc-pack-unit{ font-weight: 500; color: #D3D8DF; }
#mdcM .mdc-pack-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 11px; line-height: 15px; color: #AEB6C2; }
#mdcM .mdc-pack-per{ white-space: nowrap; font-variant-numeric: tabular-nums; }
#mdcM .mdc-pack-vip,
#mdcM .mdc-m-vip{
  display: inline-block; padding: 0 7px; border: 1px solid rgba(247, 207, 112, .5); border-radius: 999px;
  color: #F7CF70; font-size: 10px; line-height: 16px; font-weight: 700; white-space: nowrap;
}
#mdcM .mdc-pack-tag{ color: #F7CF70; font-weight: 500; }
#mdcM .mdc-pack-eur{ font-size: 15px; line-height: 20px; font-weight: 600; color: #F3F4F6; white-space: nowrap; font-variant-numeric: tabular-nums; }
#mdcM .mdc-vipnote{ margin: 12px 0 0 0; font-size: 11px; line-height: 17px; color: #AEB6C2; }
#mdcM[data-state="paying"] .mdc-pack{ opacity: .5; cursor: default; pointer-events: none; }

#mdcM .mdc-m-order{ min-width: 0; padding: 24px 26px; background: #101317; border-left: 1px solid #34383F; border-radius: 0 0 16px 0; }
#mdcM .mdc-m-sum{ padding: 16px 0 0 0; }
#mdcM .mdc-m-big{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
#mdcM .mdc-m-big strong{ font-size: 34px; line-height: 42px; font-weight: 700; color: #F7CF70; white-space: nowrap; font-variant-numeric: tabular-nums; }
#mdcM .mdc-m-unit{ font-size: 12px; color: #AEB6C2; }
#mdcM .mdc-m-vip{ align-self: center; }
#mdcM .mdc-m-rows{ display: grid; gap: 7px; margin: 14px 0 0 0; }
#mdcM .mdc-m-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; line-height: 18px; color: #AEB6C2; }
#mdcM .mdc-m-row b{ min-width: 0; text-align: right; color: #F3F4F6; font-weight: 600; overflow-wrap: anywhere; }
#mdcM .mdc-m-row .mdc-bal{ color: #AEB6C2; font-weight: 500; white-space: nowrap; }
#mdcM .mdc-m-row #mdcAfter{ white-space: nowrap; }
#mdcM .mdc-m-arrow{ font-style: normal; }
#mdcM .mdc-m-arrow::before{ content: '\2192'; margin: 0 5px; color: #AEB6C2; font-weight: 400; }
#mdcM .mdc-m-total{
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 24px 0 0 0; padding: 22px 0 0 0; border-top: 1px solid #34383F; font-size: 12px; color: #AEB6C2;
}
#mdcM .mdc-m-total b{ font-size: 21px; line-height: 28px; font-weight: 700; color: #F3F4F6; white-space: nowrap; font-variant-numeric: tabular-nums; }
#mdcM .mdc-m-secure{ display: flex; align-items: center; gap: 8px; margin: 24px 0 14px 0; color: #B1C6BC; font-size: 11px; line-height: 16px; }
#mdcM .mdc-m-secure i{ flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #74CEAD; }
#mdcM .mdc-pay{ margin: 0; }
#mdcM #mdcPayBtns{ min-height: 48px; }
#mdcM #mdcPayBtns iframe{ background: transparent !important; }
#mdcM #mdcPayBtns:has(iframe){ overflow: hidden; height: 48px; border-radius: 24px; line-height: 0; }
#mdcM .mdc-loading{
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px;
  border: 1px dashed #34383F; border-radius: 24px; color: #AEB6C2; font-size: 12px; line-height: 18px; text-align: center;
}
#mdcM .mdc-msg{
  display: block; margin: 0 0 12px 0; padding: 10px 12px;
  border: 1px solid #34383F; border-radius: 8px; background: rgba(255, 255, 255, .03);
  color: #E5E7EB; font-size: 12px; line-height: 18px; text-align: center;
}
#mdcM .mdc-msg--err{ border-color: rgba(255, 128, 142, .35); background: rgba(255, 90, 110, .07); color: #FFA2AC; }
#mdcM[data-state="paying"] .mdc-msg,
#mdcM[data-state="error"] .mdc-msg{ margin-bottom: 0; }   /* PayPal mygtukas paslepta */
#mdcM[data-state="paying"] .mdc-msg:not(.mdc-msg--err){ border-color: rgba(247, 207, 112, .35); background: rgba(247, 207, 112, .05); color: #F3F4F6; }
#mdcM.is-capturing .mdc-msg::before{
  content: ''; display: inline-block; width: 12px; height: 12px; margin: 0 8px -2px 0;
  border: 2px solid rgba(247, 207, 112, .3); border-top-color: #F7CF70; border-radius: 50%;
  animation: mdcSpin .8s linear infinite;
}
@keyframes mdcSpin{ to{ transform: rotate(360deg); } }
#mdcM .mdc-m-note{ margin: 12px 0 0 0; font-size: 11px; line-height: 17px; color: #AEB6C2; }

/* ---- mygtukai lange ---- */
#mdcM .mdc-m-btn{
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 10px 16px;
  border: 1px solid #34383F; border-radius: 8px; background: rgba(255, 255, 255, .03);
  color: #F3F4F6; font: 600 14px/20px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-decoration: none; text-transform: none; text-shadow: none; box-shadow: none; cursor: pointer;
}
#mdcM .mdc-m-btn:hover{ background: rgba(255, 255, 255, .07); color: #FFFFFF; }
#mdcM .mdc-m-btn--gold{ min-height: 48px; border-color: #D1AD58; border-radius: 10px; background: rgba(247, 207, 112, .08); color: #F7CF70; }
#mdcM .mdc-m-btn--gold:hover{ background: rgba(247, 207, 112, .15); color: #F7CF70; }
#mdcM .mdc-msg .mdc-retry{ margin: 10px 0 0 0; color: #F3F4F6; }

/* ---- rezultatas (tame paciame lange) ---- */
#mdcM .mdc-m-res{ display: none; }
#mdcM[data-state="done"] .mdc-m-layout,
#mdcM[data-state="paid"] .mdc-m-layout{ display: none; }
#mdcM[data-state="done"] .mdc-m-res,
#mdcM[data-state="paid"] .mdc-m-res{ display: block; padding: 30px 26px 28px; }
#mdcM .mdc-done,
#mdcM .mdc-paid{ max-width: 420px; margin: 0 auto; text-align: center; }
#mdcM .mdc-m-check,
#mdcM .mdc-m-wait{ display: block; position: relative; width: 56px; height: 56px; margin: 0 auto 14px auto; border-radius: 50%; }
#mdcM .mdc-m-check{ border: 1px solid rgba(116, 206, 173, .45); background: rgba(116, 206, 173, .08); }
#mdcM .mdc-m-check::after{
  content: ''; position: absolute; left: 21px; top: 13px; width: 12px; height: 23px;
  border: solid #74CEAD; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
#mdcM .mdc-m-wait{ border: 1px solid rgba(247, 207, 112, .45); background: rgba(247, 207, 112, .07); }
#mdcM .mdc-m-wait::before{
  content: ''; position: absolute; top: 14px; right: 14px; bottom: 14px; left: 14px; border: 2px solid #F7CF70; border-radius: 50%;
}
#mdcM .mdc-m-wait::after{
  content: ''; position: absolute; left: 26px; top: 20px; width: 7px; height: 9px;
  border: solid #F7CF70; border-width: 0 0 2px 2px;
}
/* sulaikyta rankiniam patikrinimui: "!" vietoj laikrodzio */
#mdcM .mdc-paid--held .mdc-m-wait::before{
  top: 14px; right: auto; bottom: auto; left: 50%; width: 3px; height: 17px; margin-left: -1.5px;
  border: 0; border-radius: 2px; background: #F7CF70;
}
#mdcM .mdc-paid--held .mdc-m-wait::after{
  top: 35px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border: 0; border-radius: 50%; background: #F7CF70;
}
#mdcM .mdc-done-h{ font-size: 11px; line-height: 16px; font-weight: 700; color: #F7CF70; text-transform: uppercase; letter-spacing: .04em; }
#mdcM .mdc-done-cr{ margin: 8px 0 6px 0; font-size: 40px; line-height: 48px; font-weight: 700; color: #F7CF70; white-space: nowrap; font-variant-numeric: tabular-nums; }
#mdcM .mdc-done-cr small{ font-size: 15px; font-weight: 500; color: #AEB6C2; }
#mdcM .mdc-done-t{ margin: 0; font-size: 13px; line-height: 20px; color: #AEB6C2; }
#mdcM .mdc-done-t b{ color: #F3F4F6; font-weight: 600; white-space: nowrap; }
#mdcM .mdc-done-vip{
  display: inline-block; margin: 14px 0 0 0; padding: 8px 12px;
  border: 1px solid rgba(247, 207, 112, .35); border-radius: 8px; background: rgba(247, 207, 112, .06);
  color: #F7CF70; font-size: 12px; line-height: 18px; font-weight: 600;
}
#mdcM .mdc-done-vip a{ color: #F3F4F6; font: inherit; font-weight: 500; text-decoration: underline; }
#mdcM .mdc-done-vip a:hover{ color: #FFFFFF; }
#mdcM .mdc-done .mdc-m-btn,
#mdcM .mdc-paid .mdc-m-btn{ margin-top: 24px; }
#mdcM .mdc-paid strong{ display: block; font-size: 18px; line-height: 26px; font-weight: 700; color: #F3F4F6; }
#mdcM .mdc-paid p{ margin: 10px 0 0 0; font-size: 13px; line-height: 20px; color: #AEB6C2; }
#mdcM .mdc-order{
  display: inline-block; margin-top: 4px; padding: 4px 10px;
  border: 1px solid #34383F; border-radius: 6px; background: rgba(255, 255, 255, .03);
  color: #F3F4F6; font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .04em; word-break: break-all; -webkit-user-select: all; user-select: all;
}

/* ---- neprisijungus: prisijungimo kvietimas vietoj paketu ---- */
#mdcM .mdc-login{ max-width: 380px; margin: 0 auto; padding: 32px 26px 30px; text-align: center; }
#mdcM .mdc-m-lock{
  display: block; position: relative; width: 56px; height: 56px; margin: 0 auto 16px auto;
  border: 1px solid rgba(247, 207, 112, .3); border-radius: 50%; background: rgba(247, 207, 112, .063);
}
#mdcM .mdc-m-lock::before{
  content: ''; position: absolute; left: 21px; top: 14px; width: 14px; height: 12px;
  border: 2px solid #F7CF70; border-bottom: 0; border-radius: 7px 7px 0 0;
}
#mdcM .mdc-m-lock::after{ content: ''; position: absolute; left: 17px; top: 25px; width: 22px; height: 16px; border-radius: 3px; background: #F7CF70; }
#mdcM .mdc-login p{ margin: 0 0 18px 0; font-size: 14px; line-height: 21px; color: #E5E7EB; }
#mdcM .mdc-reg{ display: block; margin-top: 14px; font-size: 12px; line-height: 18px; color: #AEB6C2; }
#mdcM .mdc-reg a{ color: #F7CF70; font: inherit; text-decoration: underline; }
#mdcM .mdc-reg a:hover{ color: #FFFFFF; }

/* ---- telefonas / plansete (<= 800px): lapas is apacios ---- */
@media (max-width: 800px){
  #mdcM{ align-items: flex-end; padding: 12px 0 0 0; }
  #mdcM .mdc-m-dialog,
  #mdcM[data-state="login"] .mdc-m-dialog,
  #mdcM[data-state="done"] .mdc-m-dialog,
  #mdcM[data-state="paid"] .mdc-m-dialog{
    width: 100%; max-width: 640px; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px);
    border-bottom: 0; border-radius: 16px 16px 0 0;
  }
  #mdcM .mdc-m-head{ grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; padding: 14px 16px; }
  #mdcM .mdc-m-coin{ display: none; }
  #mdcM h2{ font-size: 21px; margin: 2px 0; }
  #mdcM .mdc-m-layout{ grid-template-columns: minmax(0, 1fr); }
  #mdcM .mdc-m-picker{ padding: 14px 16px 16px; }
  #mdcM .mdc-m-sect{ margin-bottom: 10px; }
  #mdcM .mdc-packs{ gap: 7px; }
  #mdcM .mdc-pack{ min-height: 56px; padding: 8px 12px; gap: 10px; }
  #mdcM .mdc-pack-copy{ gap: 2px; }
  #mdcM .mdc-pack-amt,
  #mdcM .mdc-pack-eur{ font-size: 15px; }
  #mdcM .mdc-vipnote{ margin-top: 10px; }
  #mdcM .mdc-m-order{
    padding: 14px 16px 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    border-left: 0; border-top: 1px solid #34383F; border-radius: 0;
  }
  #mdcM .mdc-m-order > .mdc-m-sect{ display: none; }
  #mdcM .mdc-m-sum{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; padding: 0; }
  #mdcM .mdc-m-big strong{ font-size: 26px; line-height: 32px; }
  #mdcM .mdc-m-total{ grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: 0; }
  #mdcM .mdc-m-total > span{ display: none; }
  #mdcM .mdc-m-total b{ font-size: 20px; }
  #mdcM .mdc-m-rows{ grid-column: 1 / -1; margin-top: 8px; }
  #mdcM .mdc-m-secure{ margin: 12px 0 10px 0; }
  #mdcM .mdc-m-note{ margin-top: 10px; text-align: center; }
  #mdcM[data-state="done"] .mdc-m-res,
  #mdcM[data-state="paid"] .mdc-m-res{ padding: 22px 16px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  #mdcM .mdc-done-cr{ font-size: 34px; line-height: 42px; }
  #mdcM .mdc-login{ padding: 24px 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-height: 420px){
  #mdcM{ padding-top: 0; padding-bottom: 0; }
  #mdcM .mdc-m-dialog{ max-height: 100vh; max-height: 100dvh; }
  #mdcM .mdc-m-head{ grid-template-columns: minmax(0, 1fr) 38px; gap: 10px; padding: 8px 16px; }
  #mdcM .mdc-m-coin,
  #mdcM .mdc-m-eyebrow,
  #mdcM #mdcMSub{ display: none; }
  #mdcM h2{ margin: 0; font-size: 18px; line-height: 24px; }
  #mdcM .mdc-m-x{ width: 38px; height: 38px; min-height: 38px; border-radius: 10px; }
  #mdcM .mdc-m-x span::before,
  #mdcM .mdc-m-x span::after{ top: 17px; left: 10px; }
}

@media (prefers-reduced-motion: reduce){
  #mdcM *, #mdcM *::before, #mdcM *::after{ transition: none !important; animation: none !important; }
  #mdcM .mdc-m-dialog.is-nudge{ animation: none; }
}

/* 2026-09-28 owner pick (option C, was B): stack of gold credit coins instead of the CSS ring + diamond, in the panel (.mdc-coin)
   and the purchase window header (.mdc-m-coin). Same selectors, later in the file, so they win; display is not
   touched, so the phone rules that hide .mdc-m-coin still apply. */
#bodyarea #colC #mdc .mdc-coin,
#mdcM .mdc-m-coin{
  border: 0; border-radius: 50%;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='31' fill='%230A0806' stroke='%23E0A93B' stroke-width='2'/%3E%3Cg stroke='%237A4E0E' stroke-width='1.4'%3E%3Cpath d='M17 40 v5 a15 5 0 0 0 30 0 v-5' fill='%23C9912A'/%3E%3Cellipse cx='32' cy='40' rx='15' ry='5' fill='%23F2C14E'/%3E%3Cpath d='M17 32 v5 a15 5 0 0 0 30 0 v-5' fill='%23C9912A'/%3E%3Cellipse cx='32' cy='32' rx='15' ry='5' fill='%23F2C14E'/%3E%3Cpath d='M17 24 v5 a15 5 0 0 0 30 0 v-5' fill='%23C9912A'/%3E%3Cellipse cx='32' cy='24' rx='15' ry='5' fill='%23FFE08A'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
#bodyarea #colC #mdc .mdc-coin::before,
#bodyarea #colC #mdc .mdc-coin::after,
#mdcM .mdc-m-coin::before,
#mdcM .mdc-m-coin::after{ content: none; }

/* 2026-09-28: pay by card (Stripe Checkout) under the PayPal button - the same 48px pill as PayPal,
   dark because gold belongs to PayPal; the !importants match the MU theme's bare-button rules. */
#mdcM .mdc-card{ margin-top: 12px; }
#mdcM .mdc-card-or{ display: flex; align-items: center; gap: 10px; margin: 0 0 12px 0; color: #AEB6C2; font-size: 11px; line-height: 1; text-transform: uppercase; }
#mdcM .mdc-card-or::before, #mdcM .mdc-card-or::after{ content: ''; flex: 1; height: 1px; background: #34383F; }
#mdcM .mdc-card-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px !important; margin: 0; padding: 0 18px !important; border: 1px solid #4B5059 !important; border-radius: 24px !important; background: linear-gradient(180deg, #272B32, #1A1D22) !important; color: #F3F4F6 !important; font: 600 15px/1 Inter, system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important; transition: border-color .15s ease, filter .15s ease; }
#mdcM .mdc-card-btn:hover:not([disabled]){ border-color: #737B88 !important; filter: brightness(1.12); }
#mdcM .mdc-card-btn:focus-visible{ outline: 2px solid #7FD9E4; outline-offset: 3px; }
#mdcM .mdc-card-btn[disabled]{ opacity: .65; cursor: progress; }
#mdcM .mdc-card-btn i{ position: relative; flex: 0 0 auto; width: 22px; height: 15px; border: 1.5px solid currentColor; border-radius: 3px; }
#mdcM .mdc-card-btn i::before{ content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: currentColor; }
#mdcM .mdc-card-test{ margin: 8px 0 0 0; color: #F7CF70; font-size: 11px; line-height: 16px; text-align: center; }
#mdcM.is-opening .mdc-card-btn{ pointer-events: none; }
/* the card block sits beside #mdcPay, not inside it: it stays when PayPal fails to load (state "error")
   and goes away with the pay area while paying / done / paid */
#mdcM:not([data-state="ready"]):not([data-state="error"]) .mdc-card{ display: none; }

/* 2026-10-15 crypto (NOWPayments): the card's button, a coin instead of the card */
#mdcM .mdc-crypto{ margin-top: 10px; }
#mdcM .mdc-crypto-btn i{ width: 17px; height: 17px; border-radius: 50%; }
#mdcM .mdc-crypto-btn i::before{ left: 50%; right: auto; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: none; border: 1.5px solid currentColor; border-radius: 1px; transform: rotate(45deg); box-sizing: border-box; }
#mdcM .mdc-crypto-coins{ margin: 8px 0 0 0; color: #AEB6C2; font-size: 11.5px; line-height: 16px; text-align: center; }
#mdcM.is-opening .mdc-crypto-btn{ pointer-events: none; }