.wsb-bn-btn { display: block; width: 100%; padding: 12px 20px; margin-bottom: 10px; background: var(--wsb-bn-btn-bg, #f59e0b); color: var(--wsb-bn-btn-txt, #000); border: none; border-radius: 5px; font-size: 1em; font-weight: 600; cursor: pointer; transition: filter .2s, transform .1s; text-align: center; } .wsb-bn-btn:hover  { filter: brightness(1.08); } .wsb-bn-btn:active { transform: scale(.98); } .wsb-bn-btn:disabled { opacity: .65; cursor: not-allowed; } .wsb-bn-arrow { flex-shrink: 0; margin-left: 6px; vertical-align: -3px; transition: transform .2s ease; } .wsb-bn-btn:hover .wsb-bn-arrow { transform: translateX(3px); } .wsb-bn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,.25); border-top-color: currentColor; border-radius: 50%; animation: wsb-bn-spin .8s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes wsb-bn-spin { to { transform: rotate(360deg); } } .wsb-bn-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(4px); z-index: 999999; align-items: center; justify-content: center; } .wsb-bn-modal.wsb-bn-modal--open { display: flex; animation: wsb-bn-fadein .25s ease; } @keyframes wsb-bn-fadein { from { opacity: 0; } to   { opacity: 1; } } .wsb-bn-modal-box { background: #fff; width: 95%; max-width: 1280px; height: 90vh; max-height: 800px; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: wsb-bn-slideup .28s ease; } @keyframes wsb-bn-slideup { from { transform: translateY(28px); opacity: 0; } to   { transform: translateY(0);    opacity: 1; } } .wsb-bn-modal-head { background: linear-gradient(135deg, var(--wsb-bn-mod-from, #ef4444) 0%, var(--wsb-bn-mod-to, #c53030) 100%); color: #fff; padding: 0 20px; height: 52px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .wsb-bn-modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: #fff; } .wsb-bn-modal-close { background: none; border: none; color: #fff; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; transition: background .2s; } .wsb-bn-modal-close:hover { background: rgba(255,255,255,.2); } .wsb-bn-modal-body { flex: 1; position: relative; overflow: hidden; } .wsb-bn-loading { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 5; gap: 14px; color: #6b7280; font-size: 15px; } .wsb-bn-loading-spinner { width: 46px; height: 46px; border: 4px solid #f3f3f3; border-top-color: var(--wsb-bn-mod-from, #ef4444); border-radius: 50%; animation: wsb-bn-spin .5s linear infinite; } .wsb-bn-success { position: absolute; inset: 0; background: #fff; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 10; gap: 10px; text-align: center; padding: 30px; } .wsb-bn-success-img { max-width: 420px; width: 100%; animation: wsb-bn-bouncein .55s ease; } @keyframes wsb-bn-bouncein { 0%   { transform: scale(.3); opacity: 0; } 55%  { transform: scale(1.06); } 75%  { transform: scale(.95); } 100% { transform: scale(1);   opacity: 1; } } .wsb-bn-success-heading { font-size: 17px; font-weight: 700; color: #111; text-transform: uppercase; margin: 0; } .wsb-bn-success-subtext { font-size: 14px; color: #6b7280; margin: 0; } .wsb-bn-iframe { width: 100%; height: 100%; border: none; display: none; } @media (max-width: 600px) { .wsb-bn-modal-box { width: 100%; height: 100%; max-height: none; border-radius: 0; } }