/* Scoped Diwali Spin widget styles - prefix: msdw- (use only inside the widget) */
.msdw-widget { --msdw-primary: #2459bf; --msdw-accent: #5715a4; --msdw-text: #1c1c1c;
              --msdw-card-bg: rgba(255,255,255,0.98); --msdw-success: #28a745; --msdw-danger: #dc3545;
              font-family: inherit; color: var(--msdw-text); }

.msdw-widget * { box-sizing: border-box; }

/* Base button reset inside widget */
.msdw-widget button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }

/* CTA button */
.msdw-widget .msdw-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--msdw-primary), var(--msdw-accent));
    color: #fff;
    box-shadow: 0 8px 24px rgba(37, 38, 60, 0.12);
    font-weight: 600;
    font-size: 15px;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 999;
}

/* Modal overlay (scoped) */
.msdw-widget .msdw-modal {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,0.45); z-index: 99999; -webkit-tap-highlight-color: transparent;
}
.msdw-widget .msdw-modal.show { display:flex; }

/* Card */
.msdw-widget .msdw-card {
  width: 100%; max-width: 820px; background: var(--msdw-card-bg);
  border-radius: 12px; padding: 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

#formModal .msdw-card {
    max-width: 420px;
}

/* Header */
.msdw-widget .msdw-modal__header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.msdw-widget .msdw-modal__header h2 { margin:0; font-size:20px; line-height:1.15; }
.msdw-widget .msdw-close-btn { font-size:20px; line-height:1; padding:6px 8px; border-radius:6px; }

/* Wheel layout */
.msdw-widget .msdw-wheel-wrap { display:flex; gap:18px; align-items:center; flex-direction:column; text-align:center; }
.msdw-widget .msdw-wheel-container { position: relative; width: 360px; height: 360px; border-radius:50%; overflow: visible; }
.msdw-widget .msdw-wheel { width:100%; height:100%; border-radius:50%; transition: transform 6s cubic-bezier(.17,.84,.44,1); 
                           display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:#fff; user-select:none; transform: rotate(0deg); }
.msdw-widget .msdw-wheel__center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:110px; height:110px;
                                   border-radius:50%; display:flex; align-items:center; justify-content:center;
                                   background: linear-gradient(180deg, #fff, rgba(255,255,255,0.45)); color:var(--msdw-text); font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,0.10); }

/* pointer (triangle) */
.msdw-widget .msdw-pointer { position:absolute; top:-18px; left:50%; transform:translateX(-50%); width:0; height:0;
                              border-left:18px solid transparent; border-right:18px solid transparent;
                              border-bottom:30px solid var(--msdw-danger); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12)); z-index:60; }

/* Spin button */
.msdw-widget .msdw-spin-btn {
  margin-top:12px; padding:10px 18px; border-radius:10px; font-weight:600;
  background: linear-gradient(90deg, var(--msdw-accent), var(--msdw-primary)); color:#fff;
  box-shadow: 0 8px 20px rgba(37,38,60,0.08);
}
.msdw-widget .msdw-spin-btn[disabled]{ opacity:0.5; cursor:not-allowed; }

/* Result text */
.msdw-widget .msdw-result { margin-top:12px; font-size:16px; color:var(--msdw-text); }

/* Stepper / form */
.msdw-widget .msdw-stepper { margin-top:16px; border-radius:10px; padding:12px; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.95)); }
.msdw-widget .msdw-steps-indicator { display:flex; gap:8px; align-items:center; justify-content:center; margin-bottom:12px; }
.msdw-widget .msdw-step-dot { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#eee; color:#444; font-weight:700; }
.msdw-widget .msdw-step-dot.msdw-active,
.msdw-widget .msdw-step-dot.active { background: linear-gradient(90deg, var(--msdw-primary), var(--msdw-accent)); color:#fff; }

/* Form fields (scoped) */
.msdw-widget .msdw-form { display:flex; flex-direction:column; gap:12px; }
.msdw-widget .msdw-label { font-size:14px; display:block; margin-bottom:6px; }
.msdw-widget .msdw-input { padding:10px 12px; border-radius:8px; border:1px solid #ddd; font-size:15px; width:100%; outline:none; }
.msdw-widget .msdw-input:focus { box-shadow: 0 6px 18px rgba(36,89,191,0.08); border-color: var(--msdw-primary); }

/* Buttons used in forms */
.msdw-widget .msdw-btn { padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:600; }
.msdw-widget .msdw-btn--ghost { background:transparent; border:1px solid #ddd; color:inherit; }
.msdw-widget .msdw-btn--primary { background: linear-gradient(90deg, var(--msdw-primary), var(--msdw-accent)); color:#fff; border:0; }

/* Form actions */
.msdw-widget .msdw-form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }

/* Hidden helpers (scoped so it doesn't clobber site-wide .hidden) */
.msdw-widget .msdw-hidden { display:none !important; }
.msdw-widget .hidden { display:none !important; } /* compatibility if JS toggles 'hidden' */

/* Coupon block */
.msdw-widget .msdw-coupon-wrap { margin-top:10px; }
.msdw-widget .msdw-coupon { display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; border:1px dashed #ccc; background: linear-gradient(90deg,#fff,#fff8); }
.msdw-widget .msdw-coupon-code { font-family: monospace; font-weight:700; padding:8px 12px; border-radius:6px; background:#fff; }
.msdw-widget .msdw-coupon-right { margin-left:auto; text-align:right; }
.msdw-widget .msdw-coupon-actions { display:flex; gap:8px; align-items:center; }

/* small text */
.msdw-widget .msdw-small { font-size:13px; color:#666; }

/* Form message */
.msdw-widget .msdw-form-message { margin-top:10px; font-size:14px; }

/* Confetti compatibility (if JS adds .confetti-piece) */
.msdw-widget .confetti-piece, .msdw-widget .msdw-confetti-piece { position:fixed; width:10px; height:16px; border-radius:2px; opacity:0; pointer-events:none; z-index:999999; }

/* Responsive: reduce wheel on small screens */
@media (max-width:520px) {
  .msdw-widget .msdw-wheel-container { width: 300px; height: 300px; }
  .msdw-widget .msdw-card { padding:16px; }
      .msdw-widget .msdw-cta {
        padding: 10px 16px;
        font-size: 14px;
        bottom: 5rem;
        right: 50%;
        transform: translateX(50%);
    }
}