/* Spin Lucky Custom V3 CSS */
.spinlucky-wrapper, .ladi-element.spinlucky-wrapper { display:inline-block; position:relative; }
.ladi-spin-lucky { font-size:22px; font-weight:bold; color:rgb(248,192,86); text-align:center; width:100%; height:100%; border-radius:50%; box-shadow: 0 0 7px rgba(64,64,64,0.6), 0 8px 50px rgba(64,64,64,0.3); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.03), transparent 10%), linear-gradient(180deg,#1f1f1f,#0f0f0f); position:relative; overflow:hidden; }

.ladi-spin-lucky-screen { width:100%; height:100%; border-radius:50%; transition: transform 7000ms cubic-bezier(0.25,0.1,0,1); transform-origin:50% 50%; position:relative; }
/* allow background-image to be set by JS from localized data; fallback uses CSS variable */
.ladi-spin-lucky-screen::before { content: ''; position:absolute; inset:0; pointer-events:none; background-size:cover; background-position:center center; opacity:0.14; }

.ladi-spin-lucky-label { position:absolute; top:50%; left:50%; overflow:hidden; width:42%; padding-left:12%; transform-origin:0 0; line-height:1.6; text-shadow: 1px 0 2px rgba(0,0,0,0.5); color: #f8c056; font-weight:700; }

.ladi-spin-lucky-start { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:20%; height:20%; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#111; font-weight:800; box-shadow: 0 6px 18px rgba(0,0,0,0.35); transition: transform .12s ease; z-index:10; user-select:none; background-color: #ffd659; background-size: contain; background-repeat: no-repeat; background-position: center; }
.ladi-spin-lucky-start.spin-active { transform: scale(.96); }

.spinlucky-wrapper { width:320px; height:320px; }

/* Modal */
.spinlucky-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); visibility:hidden; opacity:0; transition: opacity .18s ease; z-index:99999; }
.spinlucky-modal[aria-hidden="false"] { visibility:visible; opacity:1; }
.spinlucky-modal-content { background:#fff; color:#111; padding:18px; border-radius:10px; width:340px; max-width:90%; box-shadow: 0 10px 40px rgba(0,0,0,0.25); position:relative; }
.spinlucky-modal-close { position:absolute; top:8px; right:8px; background:transparent; border:none; font-size:20px; cursor:pointer; }
.spinlucky-paragraph { font-size:14px; color:#333; margin-bottom:8px; }
.spinlucky-headline { font-size:26px; color:#f8c056; margin:8px 0; font-weight:900; }
.spinlucky-claim { display:inline-block; background:#6f2a9a; color:#fff; padding:10px 16px; border-radius:6px; text-decoration:none; font-weight:700; }

@media (max-width:480px){
  .spinlucky-wrapper { width:260px; height:260px; }
  .spinlucky-modal-content { width:90%; padding:14px; }
}