
.wpg-wrap{direction:rtl;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Vazirmatn","IRANSans",Arial,sans-serif;margin:14px auto;max-width:980px}
.wpg-card{border-radius:22px;padding:18px;position:relative;overflow:hidden}
.wpg-glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 60px rgba(0,0,0,.14);backdrop-filter:blur(14px)}
.wpg-card:before{content:"";position:absolute;inset:-80px;background:
  radial-gradient(circle at 20% 20%, rgba(59,130,246,.35), transparent 55%),
  radial-gradient(circle at 80% 30%, rgba(34,197,94,.28), transparent 55%),
  radial-gradient(circle at 40% 90%, rgba(245,158,11,.28), transparent 55%);
  filter:blur(18px);opacity:.85}
.wpg-card>*{position:relative;z-index:1}
.wpg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.wpg-title{font-size:20px;font-weight:800;color:#0b1220}
.wpg-sub{margin-top:6px;color:#334155;font-size:13px}
.wpg-badge{font-weight:800;font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.08);color:#0b1220;border:1px solid rgba(15,23,42,.10)}
.wpg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.wpg-label{display:block;color:#0b1220;font-weight:800;margin:8px 0}
.wpg-input{width:100%;box-sizing:border-box;border-radius:14px;border:1px solid rgba(15,23,42,.14);background:rgba(255,255,255,.80);padding:12px 14px;font-size:15px;color:#0b1220;outline:none}
.wpg-input:focus{border-color:rgba(59,130,246,.5);box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.wpg-btn{width:100%;margin-top:10px;border:none;border-radius:14px;padding:12px 14px;font-size:15px;font-weight:900;cursor:pointer;color:#fff;background:linear-gradient(135deg,#2563eb,#22c55e);box-shadow:0 12px 24px rgba(37,99,235,.18)}
.wpg-btn:disabled{opacity:.6;cursor:not-allowed}
.wpg-msg{margin-top:10px;color:#0b1220;font-weight:800}
.wpg-wheel-area{display:flex;align-items:center;justify-content:center;padding:6px 0;min-height:420px;position:relative}
.wpg-pointer{position:absolute;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:22px solid rgba(15,23,42,.88);top:6px;left:50%;transform:translateX(-50%)}
.wpg-wheel{position:relative;width:min(420px,92vw);height:min(420px,92vw);display:grid;place-items:center}
.wpg-wheel canvas{width:100%!important;height:100%!important;display:block;border-radius:999px;box-shadow:0 20px 60px rgba(0,0,0,.18);background:rgba(255,255,255,.70)}
.wpg-spin-fab{position:absolute;width:92px;height:92px;border-radius:999px;border:1px solid rgba(15,23,42,.14);background:rgba(255,255,255,.92);font-weight:1000;letter-spacing:.08em;cursor:pointer;box-shadow:0 18px 35px rgba(0,0,0,.14);color:#0b1220}
.wpg-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px}
.wpg-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.55)}
.wpg-modal-card{position:relative;max-width:540px;width:min(540px,94vw);padding:18px;border-radius:22px}
.wpg-modal-title{font-size:18px;font-weight:1000;color:#0b1220}
.wpg-modal-body{margin-top:10px;color:#0b1220;font-weight:800;line-height:1.8}
.wpg-modal-actions{margin-top:14px;display:flex;gap:10px;justify-content:flex-start}
.wpg-modal-btn{border:none;border-radius:14px;padding:12px 14px;font-weight:1000;cursor:pointer;color:#fff;background:linear-gradient(135deg,#16a34a,#2563eb);flex:1}
.wpg-modal-close{border:1px solid rgba(15,23,42,.16);border-radius:14px;padding:12px 14px;font-weight:1000;cursor:pointer;background:rgba(255,255,255,.88);flex:1;color:#0b1220}
@media (max-width:980px){.wpg-grid{grid-template-columns:1fr}.wpg-wheel-area{min-height:0}.wpg-wheel{width:min(360px,92vw);height:min(360px,92vw)}.wpg-spin-fab{width:84px;height:84px}}
@media (max-width:480px){.wpg-card{padding:14px;border-radius:18px}.wpg-title{font-size:18px}.wpg-wheel{width:min(320px,92vw);height:min(320px,92vw)}.wpg-spin-fab{width:78px;height:78px}.wpg-modal-actions{flex-direction:column}}

/* Blur background when result modal is open */
.wpg-wrap.is-modal-open .wpg-card,
.wpg-wrap.is-modal-open .wpg-stage,
.wpg-wrap.is-modal-open .wpg-wheel-area,
.wpg-wrap.is-modal-open canvas,
.wpg-wrap.is-modal-open .wpg-wheel,
.wpg-wrap.is-modal-open .wpg-form {
  filter: blur(10px);
  opacity: 0.25;
  transform: scale(0.995);
  transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  user-select: none;
}

.wpg-wrap .wpg-modal,
.wpg-wrap .wpg-modal * {
  filter: none !important;
}
