/* ==== "Spin & Win" popup ====
   Custom build (not the free WP Optin Wheel plugin - its Lite tier locks
   colours to fixed presets and requires MailChimp just to create a wheel).
   Segment order matches BBS_SPIN_SEGMENTS in bbs-spin-wheel.php:
   0 Try Again (muted grey), 1 Save 5% (ink), 2 Free Shipping (maroon),
   3 Save 10% (ink), 4 R100 Off (maroon), 5 R200 Off (ink). */

.bbs-spin-overlay{
  position:fixed;inset:0;background:rgba(12,12,14,.55);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .2s ease;padding:20px;
}
.bbs-spin-overlay.is-open{opacity:1;visibility:visible;}

.bbs-spin-modal{
  position:relative;background:#FFFFFF;border:1px solid #E4E4E7;
  max-width:380px;width:100%;padding:28px 28px 32px;text-align:center;
  max-height:92vh;overflow-y:auto;
}

.bbs-spin-close{
  position:absolute!important;top:14px!important;right:14px!important;
  width:24px!important;height:24px!important;
  background:transparent!important;color:#71717A!important;border:0!important;
  font-size:20px!important;line-height:1!important;
  cursor:pointer!important;padding:0!important;margin:0!important;
  box-sizing:border-box!important;
  font-family:inherit!important;-webkit-appearance:none!important;appearance:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  transition:color .15s ease!important;
}
.bbs-spin-close:hover{color:#0C0C0E!important;opacity:1!important;}

.bbs-spin-heading{
  font-family:Archivo,sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.02em;color:#0C0C0E;margin:8px 0 4px;line-height:1.3;
  padding-right:32px;
}

.bbs-spin-countdown{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:13px;
  color:#71717A;margin:0 0 16px;
}

.bbs-spin-wheel-wrap{
  position:relative;width:260px;height:260px;margin:0 auto 20px;
}

.bbs-spin-pointer{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:0;height:0;z-index:2;
  border-left:12px solid transparent;border-right:12px solid transparent;
  border-top:20px solid #0C0C0E;
}

.bbs-spin-wheel{
  position:relative;width:260px;height:260px;border-radius:50%;
  border:5px solid #FFFFFF;box-shadow:0 8px 28px rgba(12,12,14,.28);
  background:conic-gradient(from 0deg,
    #71717A 0deg 45deg,
    #0C0C0E 45deg 90deg,
    #6B0F1A 90deg 135deg,
    #0C0C0E 135deg 180deg,
    #71717A 180deg 225deg,
    #6B0F1A 225deg 270deg,
    #0C0C0E 270deg 315deg,
    #6B0F1A 315deg 360deg);
  transition:transform 4.2s cubic-bezier(.13,.71,.13,1);
}

.bbs-spin-label{
  position:absolute;top:50%;left:50%;width:100px;height:14px;
  margin-top:-7px;
  transform-origin:0 50%;
  transform:rotate(calc(45deg * var(--i) + 22.5deg - 90deg)) translateX(26px);
  color:#FFFFFF;font-family:'Instrument Sans',sans-serif;font-weight:700;
  font-size:10px;letter-spacing:.02em;text-transform:uppercase;
  text-align:left;white-space:nowrap;pointer-events:none;
}

.bbs-spin-hub{
  position:absolute;top:50%;left:50%;width:44px;height:44px;
  margin:-22px 0 0 -22px;border-radius:50%;
  background:#FFFFFF;border:3px solid #0C0C0E;z-index:1;
}

.bbs-spin-modal h2{
  font-family:Archivo,sans-serif;font-weight:700;font-size:22px;
  color:#0C0C0E;margin:0 0 8px;letter-spacing:-.01em;
}

.bbs-spin-eyebrow{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:#71717A;margin:0 0 6px;
}

.bbs-spin-copy{
  font-family:'Instrument Sans',sans-serif;font-size:14px;line-height:1.6;
  color:#3F3F46;margin:0 0 18px;
}

#bbs-spin-form{display:flex;flex-direction:column;gap:10px;}

#bbs-spin-email{
  width:100%;padding:13px 14px;border:1px solid #E4E4E7;border-radius:0;
  font-family:'Instrument Sans',sans-serif;font-size:14px;color:#0C0C0E;
  box-sizing:border-box;
}
#bbs-spin-email:focus{outline:none;border-color:#0C0C0E;}

.bbs-spin-error{
  display:none;color:#B42318;font-family:'Instrument Sans',sans-serif;
  font-size:13px;margin:0;text-align:left;
}
.bbs-spin-error.is-visible{display:block;}

.bbs-spin-button{
  width:100%;padding:14px 16px!important;background:#0C0C0E;color:#FFFFFF;border:0;
  border-radius:0;font-family:'Instrument Sans',sans-serif;font-weight:700;
  font-size:14px;cursor:pointer;transition:opacity .15s ease;box-sizing:border-box!important;
}
.bbs-spin-button:hover{opacity:.85;}
.bbs-spin-button:disabled{opacity:.5;cursor:default;}

@media(max-width:480px){
  .bbs-spin-modal{padding:22px 18px 26px;}
  .bbs-spin-wheel-wrap,.bbs-spin-wheel{width:220px;height:220px;}
  .bbs-spin-hub{width:38px;height:38px;margin:-19px 0 0 -19px;}
  .bbs-spin-label{width:82px;transform:rotate(calc(45deg * var(--i) + 22.5deg - 90deg)) translateX(20px);font-size:9px;}
  .bbs-spin-heading{font-size:12px;}
}