/* =====================================================================
   Coin rendelés – felugró ablak (coin-order.js), bárhonnan megnyitható.
   Látványos YiroSoft stílus: sötét üveg, arany fény, lebegő coinok, csillogó szegély.
   Független a bolt témáitól és a Bootstrap modaltól.
   ===================================================================== */
.ycoin{ --yc-bg:#0b0e14; --yc-bg-2:#121722; --yc-bg-3:#1a2130; --yc-line:rgba(255,255,255,.08); --yc-line-2:rgba(240,200,110,.32);
  --yc-text:#eef1f6; --yc-muted:#97a1b4; --yc-gold:#f3cf7a; --yc-gold-2:#c9962e; --yc-gold-3:#fff1c2; --yc-gold-rgb:243,207,122;
  --yc-ok:#22c55e; --yc-warn:#f59e0b; --yc-err:#ef4444; --yc-info:#60a5fa;
  position:fixed; inset:0; z-index:1080; display:none; font-family:inherit; color:var(--yc-text); font-size:.92rem; }
.ycoin.is-open{ display:block; }
.ycoin *{ box-sizing:border-box; }

/* ---- háttér: sötétítés + arany aura + lebegő coinok ---- */
.ycoin-overlay{ position:absolute; inset:0; background:radial-gradient(900px 600px at 50% 40%, rgba(var(--yc-gold-rgb),.10), transparent 60%), rgba(3,5,9,.72); backdrop-filter:blur(8px) saturate(1.1); opacity:0; transition:opacity .28s; overflow:hidden; }
.ycoin.is-open .ycoin-overlay{ opacity:1; }
.ycoin-fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ycoin-fx i{ position:absolute; bottom:-40px; left:var(--x,50%); width:var(--s,14px); height:var(--s,14px); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff5cf 0, var(--yc-gold) 35%, var(--yc-gold-2) 75%, #7a5a14 100%);
  box-shadow:0 0 10px rgba(var(--yc-gold-rgb),.55), inset 0 0 0 2px rgba(255,255,255,.15);
  opacity:0; animation:ycRise var(--d,9s) linear var(--delay,0s) infinite; }
.ycoin-fx i::after{ content:''; position:absolute; inset:22%; border-radius:50%; border:1.5px solid rgba(120,80,10,.55); }
@keyframes ycRise{ 0%{ transform:translateY(0) rotateY(0deg) scale(.6); opacity:0; } 8%{ opacity:.85; } 50%{ transform:translateY(-55vh) rotateY(540deg) scale(1); opacity:.7; } 100%{ transform:translateY(-110vh) rotateY(1080deg) scale(.7); opacity:0; } }

/* ---- dialog: csillogó arany keret + aurora ---- */
.ycoin-dialog{ position:absolute; left:50%; top:50%; transform:translate(-50%,-44%) scale(.96); width:min(96vw, 940px); max-height:92vh; display:flex; flex-direction:column;
  background:linear-gradient(165deg,#161c28 0%, var(--yc-bg-2) 40%, var(--yc-bg) 100%); border-radius:24px; box-shadow:0 40px 120px rgba(0,0,0,.75), 0 0 80px rgba(var(--yc-gold-rgb),.10);
  opacity:0; transition:transform .32s cubic-bezier(.2,.9,.25,1.15), opacity .25s; overflow:hidden; isolation:isolate; }
.ycoin.is-open .ycoin-dialog{ transform:translate(-50%,-50%) scale(1); opacity:1; }
/* futó arany fény a keretben */
.ycoin-dialog::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:5;
  background:conic-gradient(from var(--yc-ang,0deg), rgba(var(--yc-gold-rgb),.05), var(--yc-gold) 12%, rgba(var(--yc-gold-rgb),.05) 28%, rgba(var(--yc-gold-rgb),.05) 55%, var(--yc-gold-3) 66%, rgba(var(--yc-gold-rgb),.05) 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:ycSpinBorder 7s linear infinite; }
@property --yc-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes ycSpinBorder{ to{ --yc-ang:360deg; } }
/* aurora a fejléc mögött */
.ycoin-dialog::after{ content:''; position:absolute; inset:-40% -20% auto -20%; height:420px; pointer-events:none; z-index:0; filter:blur(40px); opacity:.9;
  background:radial-gradient(360px 200px at 18% 55%, rgba(var(--yc-gold-rgb),.28), transparent 70%), radial-gradient(420px 220px at 78% 40%, rgba(120,90,255,.16), transparent 70%), radial-gradient(300px 180px at 55% 80%, rgba(255,140,40,.14), transparent 70%);
  animation:ycAurora 12s ease-in-out infinite alternate; }
@keyframes ycAurora{ from{ transform:translateX(-4%) rotate(-2deg); } to{ transform:translateX(4%) rotate(2deg); } }
.ycoin-head,.ycoin-steps,.ycoin-body,.ycoin-foot{ position:relative; z-index:1; }

/* ---- fejléc ---- */
.ycoin-head{ display:flex; align-items:center; gap:16px; padding:20px 24px 16px; border-bottom:1px solid var(--yc-line); background:linear-gradient(180deg,rgba(255,255,255,.03),transparent); }
.ycoin-head-icon{ position:relative; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:1.55rem; color:#3a2a06; flex:0 0 auto;
  background:radial-gradient(circle at 35% 28%, #fff7dc 0, var(--yc-gold) 30%, var(--yc-gold-2) 72%, #8a6418 100%);
  box-shadow:0 10px 30px rgba(var(--yc-gold-rgb),.38), inset 0 -3px 6px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.5); animation:ycFloat 4s ease-in-out infinite; }
.ycoin-head-icon::before{ content:''; position:absolute; inset:5px; border-radius:50%; border:1.5px dashed rgba(110,75,10,.55); }
.ycoin-head-icon::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(var(--yc-gold-rgb),.35); animation:ycPulseRing 2.4s ease-out infinite; }
@keyframes ycFloat{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-4px) rotate(3deg);} }
@keyframes ycPulseRing{ 0%{ transform:scale(.85); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }
.ycoin-head h2{ margin:0; font-size:1.38rem; font-weight:900; letter-spacing:-.01em; line-height:1.1;
  background:linear-gradient(100deg, var(--yc-gold-3) 0%, var(--yc-gold) 30%, #fff7dc 50%, var(--yc-gold) 70%, var(--yc-gold-2) 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:ycShimmer 5s linear infinite; }
@keyframes ycShimmer{ to{ background-position:-220% 0; } }
.ycoin-head p{ margin:3px 0 0; font-size:.8rem; color:var(--yc-muted); }
.ycoin-balance{ position:relative; margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; padding:7px 14px; border-radius:14px; background:linear-gradient(180deg,rgba(var(--yc-gold-rgb),.14),rgba(var(--yc-gold-rgb),.05)); border:1px solid rgba(var(--yc-gold-rgb),.32); box-shadow:0 0 24px rgba(var(--yc-gold-rgb),.12), inset 0 1px 0 rgba(255,255,255,.08); }
.ycoin-balance small{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(var(--yc-gold-rgb),.75); font-weight:700; }
.ycoin-balance strong{ font-size:1.12rem; color:var(--yc-gold-3); text-shadow:0 0 14px rgba(var(--yc-gold-rgb),.45); }
.ycoin-close{ width:38px; height:38px; border-radius:12px; border:1px solid transparent; background:rgba(255,255,255,.03); color:var(--yc-muted); cursor:pointer; font-size:1.05rem; display:grid; place-items:center; transition:.18s; }
.ycoin-close:hover{ background:rgba(255,255,255,.08); color:#fff; border-color:var(--yc-line); transform:rotate(90deg); }

/* ---- lépések: fénycsík + aktív izzás ---- */
.ycoin-steps{ display:flex; gap:8px; padding:14px 24px 0; }
.ycoin-step{ flex:1; position:relative; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:14px; border:1px solid var(--yc-line); color:var(--yc-muted); font-size:.76rem; font-weight:700; background:rgba(255,255,255,.02); overflow:hidden; transition:.25s; }
.ycoin-step::after{ content:''; position:absolute; left:10px; right:10px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--yc-gold-2),var(--yc-gold-3),var(--yc-gold)); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.ycoin-step b{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; background:rgba(255,255,255,.08); transition:.25s; }
.ycoin-step.is-active{ border-color:var(--yc-line-2); color:var(--yc-gold-3); background:rgba(var(--yc-gold-rgb),.08); box-shadow:0 0 22px rgba(var(--yc-gold-rgb),.14), inset 0 1px 0 rgba(255,255,255,.06); }
.ycoin-step.is-active::after,.ycoin-step.is-done::after{ transform:scaleX(1); }
.ycoin-step.is-active b{ background:linear-gradient(180deg,var(--yc-gold-3),var(--yc-gold-2)); color:#2a1d04; box-shadow:0 0 14px rgba(var(--yc-gold-rgb),.6); }
.ycoin-step.is-done{ color:var(--yc-text); }
.ycoin-step.is-done b{ background:var(--yc-ok); color:#04200e; }

/* ---- törzs ---- */
.ycoin-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px 24px 22px; scrollbar-width:thin; scrollbar-color:rgba(var(--yc-gold-rgb),.4) transparent; }
.ycoin-view[hidden]{ display:none; }
.ycoin-view{ animation:ycFadeUp .35s ease both; }
@keyframes ycFadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.ycoin-loading,.ycoin-empty{ padding:44px 10px; text-align:center; color:var(--yc-muted); }
.ycoin-loading i{ display:inline-block; width:34px; height:34px; border:3px solid rgba(255,255,255,.1); border-top-color:var(--yc-gold); border-right-color:var(--yc-gold-3); border-radius:50%; animation:ycSpin .8s linear infinite; box-shadow:0 0 18px rgba(var(--yc-gold-rgb),.3); }
.ycoin-empty i{ font-size:2rem; color:rgba(var(--yc-gold-rgb),.5); display:block; margin-bottom:6px; }
@keyframes ycSpin{ to{ transform:rotate(360deg);} }

/* ---- Lélek Kristály leírás a csomagok fölött: arany keretes pergamen-sáv, lebegő kristály-ikon ---- */
.ycoin-lore{ position:relative; display:flex; gap:14px; align-items:flex-start; margin:4px 0 6px; padding:13px 16px; border-radius:16px; overflow:hidden;
  background:radial-gradient(420px 140px at 0% 0%, rgba(var(--yc-gold-rgb),.14), transparent 70%), linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid var(--yc-line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 26px rgba(var(--yc-gold-rgb),.08); }
.ycoin-lore::before{ content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--yc-gold-3),var(--yc-gold),var(--yc-gold-2)); }
.ycoin-lore-icon{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:1.1rem; color:#3a2a06;
  background:radial-gradient(circle at 35% 28%, #fff7dc 0, var(--yc-gold) 30%, var(--yc-gold-2) 72%, #8a6418 100%);
  box-shadow:0 6px 18px rgba(var(--yc-gold-rgb),.32), inset 0 -2px 4px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.5); animation:ycFloat 4s ease-in-out infinite; }
.ycoin-lore p{ margin:0; font-size:.84rem; line-height:1.6; color:var(--yc-muted); }
.ycoin-lore em{ display:block; margin-top:5px; font-style:italic; font-weight:700; color:var(--yc-gold-3); text-shadow:0 0 12px rgba(var(--yc-gold-rgb),.3); }
@media (max-width:720px){ .ycoin-lore{ padding:11px 12px; gap:10px; } .ycoin-lore-icon{ width:34px; height:34px; font-size:.95rem; } .ycoin-lore p{ font-size:.8rem; } }

/* ---- csomagok: üvegkártyák, fénysöprés, 3D coin ---- */
.ycoin-packs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(158px,1fr)); gap:12px; padding-top:10px; }
.ycoin-pack{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 12px 16px; border-radius:20px; border:1px solid var(--yc-line); cursor:pointer; text-align:center; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.25);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .22s; animation:ycFadeUp .45s ease both; animation-delay:calc(var(--i,0) * 60ms); }
.ycoin-pack::before{ content:''; position:absolute; top:-60%; left:-70%; width:60%; height:220%; transform:rotate(22deg); pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); transition:left .6s ease; }
.ycoin-pack:hover::before{ left:140%; }
.ycoin-pack:hover{ transform:translateY(-6px) scale(1.02); border-color:var(--yc-line-2); box-shadow:0 18px 40px rgba(0,0,0,.4), 0 0 30px rgba(var(--yc-gold-rgb),.14), inset 0 1px 0 rgba(255,255,255,.1); }
.ycoin-pack.is-featured{ border-color:rgba(var(--yc-gold-rgb),.5); background:linear-gradient(180deg,rgba(var(--yc-gold-rgb),.12),rgba(var(--yc-gold-rgb),.03)); box-shadow:0 0 34px rgba(var(--yc-gold-rgb),.16), inset 0 1px 0 rgba(255,255,255,.1); }
.ycoin-pack.is-featured::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1.5px;
  background:conic-gradient(from var(--yc-ang,0deg), transparent 0 60%, var(--yc-gold-3) 75%, transparent 90%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:ycSpinBorder 4s linear infinite; }
.ycoin-pack.is-selected{ border-color:var(--yc-gold); background:linear-gradient(180deg,rgba(var(--yc-gold-rgb),.2),rgba(var(--yc-gold-rgb),.06)); box-shadow:0 0 0 3px rgba(var(--yc-gold-rgb),.22), 0 0 40px rgba(var(--yc-gold-rgb),.25); animation:ycPop .35s cubic-bezier(.2,.9,.3,1.4); }
@keyframes ycPop{ 0%{ transform:scale(.97);} 60%{ transform:scale(1.04);} 100%{ transform:scale(1);} }
.ycoin-pack-badge{ position:absolute; top:10px; left:50%; transform:translateX(-50%); padding:3px 11px; border-radius:999px; font-size:.6rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#2a1d04; white-space:nowrap;
  background:linear-gradient(90deg,var(--yc-gold-2),var(--yc-gold-3),var(--yc-gold)); background-size:200% 100%; animation:ycShimmer 3s linear infinite; box-shadow:0 4px 14px rgba(var(--yc-gold-rgb),.4); z-index:2; }
.ycoin-pack-icon{ position:relative; width:64px; height:64px; margin:14px 0 8px; display:grid; place-items:center; font-size:1.7rem; color:#3a2a06; border-radius:50%;
  background:radial-gradient(circle at 35% 28%, #fff7dc 0, var(--yc-gold) 32%, var(--yc-gold-2) 74%, #8a6418 100%);
  box-shadow:0 10px 24px rgba(var(--yc-gold-rgb),.32), inset 0 -3px 6px rgba(0,0,0,.28), inset 0 2px 4px rgba(255,255,255,.5); transition:transform .3s; }
.ycoin-pack-icon::before{ content:''; position:absolute; inset:6px; border-radius:50%; border:1.5px dashed rgba(110,75,10,.5); }
/* coin-halom árnyék a nagyobb csomagoknál */
.ycoin-pack-icon::after{ content:''; position:absolute; left:6px; right:6px; bottom:-7px; height:10px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(var(--yc-gold-rgb),.55), transparent 70%); filter:blur(3px); }
.ycoin-pack:hover .ycoin-pack-icon{ transform:rotateY(25deg) scale(1.08); }
.ycoin-pack-icon img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.ycoin-pack-coins{ font-size:1.42rem; font-weight:900; letter-spacing:-.02em; line-height:1.05; background:linear-gradient(180deg,#fff9e6,var(--yc-gold)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 8px rgba(var(--yc-gold-rgb),.25)); }
.ycoin-pack-coins small{ font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ycoin-pack-bonus{ display:inline-flex; align-items:center; gap:4px; margin-top:2px; padding:2px 9px; border-radius:999px; font-size:.68rem; font-weight:800; color:#a7f3b8; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.3); }
.ycoin-pack-name{ margin-top:4px; font-size:.76rem; color:var(--yc-muted); }
.ycoin-pack-price{ margin-top:8px; font-size:1.02rem; font-weight:900; color:var(--yc-gold-3); text-shadow:0 0 12px rgba(var(--yc-gold-rgb),.35); }
.ycoin-pack-unit{ font-size:.62rem; color:var(--yc-muted); }
.ycoin-pack-check{ position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; display:none; place-items:center; background:linear-gradient(180deg,var(--yc-gold-3),var(--yc-gold-2)); color:#2a1d04; font-size:.78rem; box-shadow:0 0 14px rgba(var(--yc-gold-rgb),.6); z-index:2; }
.ycoin-pack.is-selected .ycoin-pack-check{ display:grid; animation:ycPop .35s cubic-bezier(.2,.9,.3,1.6); }

/* ---- fizetési mód + összegzés ---- */
.ycoin-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:14px; }
.ycoin-card{ padding:16px; border-radius:18px; border:1px solid var(--yc-line); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.ycoin-card h3{ margin:0 0 12px; font-size:.78rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--yc-muted); display:flex; align-items:center; gap:8px; }
.ycoin-card h3 i{ color:var(--yc-gold); filter:drop-shadow(0 0 6px rgba(var(--yc-gold-rgb),.5)); }
.ycoin-methods{ display:flex; flex-direction:column; gap:8px; }
.ycoin-method{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:11px 13px; border-radius:14px; border:1px solid var(--yc-line); background:rgba(0,0,0,.22); cursor:pointer; transition:.2s; overflow:hidden; }
.ycoin-method:hover{ border-color:var(--yc-line-2); background:rgba(255,255,255,.03); transform:translateX(3px); }
.ycoin-method.is-selected{ border-color:var(--yc-gold); background:linear-gradient(90deg,rgba(var(--yc-gold-rgb),.16),rgba(var(--yc-gold-rgb),.04)); box-shadow:0 0 24px rgba(var(--yc-gold-rgb),.12); }
.ycoin-method-icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--yc-gold); font-size:1.2rem; transition:.2s; }
.ycoin-method.is-selected .ycoin-method-icon{ background:linear-gradient(180deg,var(--yc-gold-3),var(--yc-gold-2)); color:#2a1d04; box-shadow:0 0 16px rgba(var(--yc-gold-rgb),.5); }
.ycoin-method-main strong{ display:block; font-size:.9rem; }
.ycoin-method-main small{ display:block; font-size:.72rem; color:var(--yc-muted); }
.ycoin-tag{ font-size:.6rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--yc-muted); }
.ycoin-tag.is-instant{ background:rgba(34,197,94,.16); color:#a7f3b8; box-shadow:0 0 12px rgba(34,197,94,.25); }
.ycoin-input{ width:100%; margin-top:10px; padding:10px 13px; border-radius:12px; border:1px solid var(--yc-line); background:rgba(0,0,0,.3); color:var(--yc-text); font-size:.86rem; outline:none; transition:.2s; }
.ycoin-input:focus{ border-color:var(--yc-gold); box-shadow:0 0 0 3px rgba(var(--yc-gold-rgb),.16), 0 0 20px rgba(var(--yc-gold-rgb),.1); }
.ycoin-input::placeholder{ color:#6b7280; }
.ycoin-sum{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; font-size:.86rem; }
.ycoin-sum div{ display:flex; justify-content:space-between; gap:10px; }
.ycoin-sum span{ color:var(--yc-muted); }
.ycoin-sum .is-total{ margin-top:6px; padding:12px; border-radius:12px; background:linear-gradient(180deg,rgba(var(--yc-gold-rgb),.14),rgba(var(--yc-gold-rgb),.05)); border:1px solid rgba(var(--yc-gold-rgb),.3); font-size:1rem; align-items:center; }
.ycoin-sum .is-total b{ color:var(--yc-gold-3); font-size:1.32rem; font-weight:900; text-shadow:0 0 14px rgba(var(--yc-gold-rgb),.45); }

/* hogyan működik – 3 mini lépés a fizetési mód alatt */
.ycoin-how{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.ycoin-how-item{ position:relative; padding:12px 10px; border-radius:14px; border:1px dashed rgba(var(--yc-gold-rgb),.25); background:rgba(var(--yc-gold-rgb),.04); text-align:center; }
.ycoin-how-item i{ display:grid; place-items:center; width:34px; height:34px; margin:0 auto 6px; border-radius:50%; background:rgba(var(--yc-gold-rgb),.12); color:var(--yc-gold); font-size:1rem; box-shadow:0 0 14px rgba(var(--yc-gold-rgb),.15); }
.ycoin-how-item b{ display:block; font-size:.76rem; color:#f7ecd0; }
.ycoin-how-item small{ display:block; font-size:.66rem; color:var(--yc-muted); line-height:1.3; margin-top:2px; }
@media (max-width:720px){ .ycoin-how{ grid-template-columns:1fr; } .ycoin-how-item{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; text-align:left; align-items:center; } .ycoin-how-item i{ grid-row:1/3; margin:0; } }

/* ---- gombok ---- */
.ycoin-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:13px; border:1px solid transparent; font-weight:800; font-size:.86rem; cursor:pointer; overflow:hidden; transition:filter .18s, transform .18s, box-shadow .18s; }
.ycoin-btn:disabled{ opacity:.45; cursor:not-allowed; }
.ycoin-btn--gold{ background:linear-gradient(180deg,var(--yc-gold-3) 0%,var(--yc-gold) 45%,var(--yc-gold-2) 100%); color:#2a1d04; box-shadow:0 10px 26px rgba(var(--yc-gold-rgb),.32), inset 0 1px 0 rgba(255,255,255,.6); }
.ycoin-btn--gold::after{ content:''; position:absolute; top:-50%; left:-60%; width:40%; height:200%; transform:rotate(20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transition:left .5s; }
.ycoin-btn--gold:hover:not(:disabled)::after{ left:130%; }
.ycoin-btn--gold:hover:not(:disabled){ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 14px 34px rgba(var(--yc-gold-rgb),.42); }
.ycoin-btn--ghost{ background:rgba(255,255,255,.05); color:var(--yc-text); border-color:var(--yc-line); }
.ycoin-btn--ghost:hover:not(:disabled){ background:rgba(255,255,255,.1); border-color:var(--yc-line-2); }
.ycoin-btn--danger{ background:rgba(239,68,68,.12); color:#f4a4a4; border-color:rgba(239,68,68,.35); }
.ycoin-btn--danger:hover:not(:disabled){ background:rgba(239,68,68,.2); }
.ycoin-btn--block{ width:100%; }
.ycoin-btn--sm{ padding:7px 12px; font-size:.78rem; border-radius:10px; }
.ycoin-terms{ margin:10px 0 0; font-size:.7rem; color:var(--yc-muted); line-height:1.45; }

/* ---- eredmény / fizetési adatok ---- */
.ycoin-result-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; padding:14px 16px; border-radius:18px; background:linear-gradient(90deg,rgba(34,197,94,.14),rgba(34,197,94,.03)); border:1px solid rgba(34,197,94,.3); }
.ycoin-result-head i{ font-size:2.2rem; color:var(--yc-ok); filter:drop-shadow(0 0 12px rgba(34,197,94,.6)); animation:ycPop .5s cubic-bezier(.2,.9,.3,1.5); }
.ycoin-result-head h3{ margin:0; font-size:1.1rem; color:#e8ffee; font-weight:900; }
.ycoin-result-head small{ color:var(--yc-muted); }
.ycoin-orderno{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--yc-gold-3); font-weight:900; letter-spacing:.05em; text-shadow:0 0 10px rgba(var(--yc-gold-rgb),.4); }
.ycoin-paybox{ display:flex; flex-direction:column; gap:7px; padding:14px 16px; border-radius:16px; background:rgba(0,0,0,.3); border:1px solid var(--yc-line); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.ycoin-payrow{ display:grid; grid-template-columns:140px 1fr auto; align-items:center; gap:10px; font-size:.86rem; }
.ycoin-payrow span{ color:var(--yc-muted); }
.ycoin-payrow strong{ word-break:break-all; }
.ycoin-payrow.is-key strong{ color:var(--yc-gold-3); font-size:1rem; }
.ycoin-payrow a{ color:var(--yc-gold); }
.ycoin-copy{ width:30px; height:30px; border-radius:9px; border:1px solid var(--yc-line); background:transparent; color:var(--yc-muted); cursor:pointer; transition:.18s; }
.ycoin-copy:hover{ color:#2a1d04; background:var(--yc-gold); border-color:var(--yc-gold); box-shadow:0 0 14px rgba(var(--yc-gold-rgb),.5); }
.ycoin-instr{ margin:12px 0; font-size:.86rem; line-height:1.55; padding:11px 13px; border-radius:14px; background:rgba(var(--yc-gold-rgb),.07); border:1px solid rgba(var(--yc-gold-rgb),.22); }
.ycoin-instr i{ color:var(--yc-gold); }
.ycoin-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* konfetti a sikeres rendelésnél */
.ycoin-confetti{ position:absolute; inset:0; pointer-events:none; z-index:6; overflow:hidden; }
.ycoin-confetti i{ position:absolute; top:40%; left:50%; width:8px; height:14px; border-radius:2px; background:var(--c,var(--yc-gold)); opacity:0; animation:ycConfetti 1.4s cubic-bezier(.2,.8,.4,1) forwards; animation-delay:var(--delay,0s); }
@keyframes ycConfetti{ 0%{ transform:translate(0,0) rotate(0); opacity:1; } 100%{ transform:translate(var(--dx,0), var(--dy,-200px)) rotate(var(--r,720deg)); opacity:0; } }

/* ---- rendeléseim ---- */
.ycoin-orders{ display:flex; flex-direction:column; gap:8px; }
.ycoin-order{ border:1px solid var(--yc-line); border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); overflow:hidden; transition:.2s; animation:ycFadeUp .4s ease both; }
.ycoin-order:hover{ border-color:var(--yc-line-2); }
.ycoin-order-head{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:11px 13px; cursor:pointer; }
.ycoin-order-head:hover{ background:rgba(255,255,255,.03); }
.ycoin-status{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:.7rem; font-weight:900; letter-spacing:.04em; white-space:nowrap; }
.ycoin-status.is-warning{ color:#fcd34d; background:rgba(245,158,11,.14); box-shadow:0 0 12px rgba(245,158,11,.2); } .ycoin-status.is-info{ color:#93c5fd; background:rgba(96,165,250,.14); }
.ycoin-status.is-success{ color:#a7f3b8; background:rgba(34,197,94,.14); box-shadow:0 0 12px rgba(34,197,94,.2); } .ycoin-status.is-danger{ color:#f4a4a4; background:rgba(239,68,68,.14); } .ycoin-status.is-muted{ color:var(--yc-muted); background:rgba(255,255,255,.06); }
.ycoin-order-main{ min-width:0; font-size:.84rem; }
.ycoin-order-main b{ color:#f7ecd0; }
.ycoin-order-main small{ display:block; color:var(--yc-muted); font-size:.72rem; }
.ycoin-order-amt{ text-align:right; font-weight:900; white-space:nowrap; color:var(--yc-gold-3); }
.ycoin-order-amt small{ display:block; font-weight:500; color:var(--yc-muted); font-size:.7rem; }
.ycoin-order-body{ padding:6px 13px 13px; border-top:1px solid var(--yc-line); }
.ycoin-order-body[hidden]{ display:none; }
.ycoin-order-meta{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0; font-size:.78rem; color:var(--yc-muted); }
.ycoin-order-meta .is-danger{ color:#f4a4a4; } .ycoin-order-meta .is-success{ color:#a7f3b8; }
.ycoin-sec{ margin:20px 0 8px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ycoin-sec h3{ margin:0; font-size:.78rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--yc-muted); display:flex; align-items:center; gap:8px; }
.ycoin-sec h3 i{ color:var(--yc-gold); }
.ycoin-guest{ text-align:center; padding:34px 16px; }
.ycoin-guest i{ font-size:2.8rem; color:var(--yc-gold); filter:drop-shadow(0 0 16px rgba(var(--yc-gold-rgb),.5)); }
.ycoin-guest h3{ margin:10px 0 0; font-weight:900; }
.ycoin-guest p{ color:var(--yc-muted); margin:8px 0 16px; }
.ycoin-toast{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); padding:9px 16px; border-radius:13px; background:var(--yc-bg-3); border:1px solid var(--yc-line-2); color:var(--yc-text); font-size:.82rem; box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 20px rgba(var(--yc-gold-rgb),.15); animation:ycToast .25s ease; z-index:7; }
.ycoin-toast.is-error{ border-color:rgba(239,68,68,.5); color:#f4a4a4; }
@keyframes ycToast{ from{ opacity:0; transform:translate(-50%,8px);} to{ opacity:1; transform:translate(-50%,0);} }
.ycoin-foot{ padding:11px 24px 15px; border-top:1px solid var(--yc-line); font-size:.72rem; color:var(--yc-muted); display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.18); }
.ycoin-foot i{ color:var(--yc-gold); }

/* ---- mobil ---- */
@media (max-width:720px){
  .ycoin-dialog{ width:100vw; max-height:100vh; height:100vh; border-radius:0; top:0; left:0; transform:none; }
  .ycoin.is-open .ycoin-dialog{ transform:none; }
  .ycoin-dialog::before{ display:none; }
  .ycoin-grid{ grid-template-columns:1fr; }
  .ycoin-packs{ grid-template-columns:repeat(2,1fr); }
  .ycoin-steps{ padding:10px 14px 0; } .ycoin-body,.ycoin-head{ padding-left:14px; padding-right:14px; }
  .ycoin-step span{ display:none; }
  .ycoin-payrow{ grid-template-columns:1fr auto; } .ycoin-payrow > span{ grid-column:1/-1; }
  .ycoin-balance{ display:none; }
  .ycoin-head-icon{ width:46px; height:46px; font-size:1.3rem; }
  .ycoin-head h2{ font-size:1.15rem; }
}
/* kevesebb mozgás kérésre */
@media (prefers-reduced-motion:reduce){
  .ycoin *{ animation:none !important; transition:none !important; }
  .ycoin-fx{ display:none; }
}
.ycoin-pack-old { opacity: .55; font-weight: 600; margin-right: .2rem; }

/* ---- Lélek kristály Érme: a saját érmekép tölti ki az ikontartókat (az arany korong-háttér és a szaggatott gyűrű helyett) ---- */
.ycoin-head-icon, .ycoin-pack-icon, .ycoin-lore-icon { background: none; box-shadow: none; }
.ycoin-head-icon::before, .ycoin-pack-icon::before { display: none; }
.ycoin-head-icon .bi-coin::before { width: 56px; height: 56px; vertical-align: 0; background-image: image-set(url(/assets/yirosoft/img/currency/soul-crystal-56.webp) 1x, url(/assets/yirosoft/img/currency/soul-crystal-112.webp) 2x); filter: drop-shadow(0 8px 18px rgba(var(--yc-gold-rgb), .35)); }
.ycoin-pack-icon .bi-coin::before { width: 66px; height: 66px; vertical-align: 0; background-image: image-set(url(/assets/yirosoft/img/currency/soul-crystal-66.webp) 1x, url(/assets/yirosoft/img/currency/soul-crystal-132.webp) 2x); filter: drop-shadow(0 6px 14px rgba(var(--yc-gold-rgb), .3)); }
.ycoin-lore-icon .bi-coin::before { width: 42px; height: 42px; vertical-align: 0; background-image: image-set(url(/assets/yirosoft/img/currency/soul-crystal-42.webp) 1x, url(/assets/yirosoft/img/currency/soul-crystal-84.webp) 2x); }
/* a háttérben szálló érmék is a saját képpel */
.ycoin-fx i { background: url(/assets/yirosoft/img/currency/soul-crystal-48.webp) center / contain no-repeat; background-image: image-set(url(/assets/yirosoft/img/currency/soul-crystal-24.webp) 1x, url(/assets/yirosoft/img/currency/soul-crystal-48.webp) 2x); box-shadow: none; }
.ycoin-fx i::after { display: none; }
@media (max-width: 720px) {
  .ycoin-head-icon .bi-coin::before { width: 46px; height: 46px; }
  .ycoin-lore-icon .bi-coin::before { width: 34px; height: 34px; }
}