/* SWC Frontend CSS v6.1.0
   Wheel structure is 1:1 from v5.4.0 (proven working).
   CSS variables layered on top for full customization.
   ------------------------------------------------------------------ */

/* ── CSS Variable Defaults (overridden by PHP inline styles) ── */
:root {
  --swc-primary         : #f2b400;
  --swc-font            : 'Poppins', sans-serif;
  --swc-bg              : #0b2a16;
  --swc-bg-end          : #11361c;
  --swc-box-bg          : transparent;
  --swc-text            : #ffffff;
  --swc-subtext         : #dff6df;
  --swc-btn-bg          : var(--swc-primary);
  --swc-btn-text        : #000000;
  --swc-btn-hover       : #ffc72c;
  --swc-buy-btn-bg      : rgba(255,255,255,.10);
  --swc-buy-btn-text    : #ffffff;
  --swc-buy-btn-hover   : rgba(255,255,255,.20);
  --swc-input-bg        : rgba(255,255,255,.92);
  --swc-input-border    : transparent;
  --swc-input-text      : #222222;
  --swc-result-bg       : rgba(255,255,255,.10);
  --swc-result-text     : #ffffff;
  --swc-wheel-border    : #ffffff;
  --swc-pointer-color   : #ffffff;
  --swc-center-dot      : #ffffff;
  --swc-heading-size    : 44px;
  --swc-subtext-size    : 16px;
  --swc-btn-size        : 18px;
  --swc-input-size      : 16px;
  --swc-heading-weight  : 700;
  --swc-btn-weight      : 900;
  --swc-heading-ls      : 0px;
  --swc-btn-ls          : 0px;
  --swc-radius-box      : 22px;
  --swc-radius-btn      : 12px;
  --swc-radius-input    : 12px;
  --swc-wheel-size      : 480px;
  --swc-box-padding     : 28px;
  --swc-box-shadow      : 0 16px 36px rgba(0,0,0,.28);
}

/* ── Outer wrapper ── */
.swc-box {
  max-width      : 1200px;
  margin         : 22px auto;
  padding        : var(--swc-box-padding);
  border-radius  : var(--swc-radius-box);
  background     : radial-gradient(1200px 600px at 20% 10%, var(--swc-bg-end), var(--swc-bg));
  color          : var(--swc-text);
  display        : grid;
  grid-template-columns : 520px 1fr;
  gap            : 42px;
  align-items    : center;
  box-shadow     : var(--swc-box-shadow);
  font-family    : var(--swc-font);
}

.swc-left { display: flex; justify-content: center; }

/* ── Wheel wrap ── */
.swc-wheel-wrap {
  position : relative;
  width    : var(--swc-wheel-size);
  height   : var(--swc-wheel-size);
}

/* ── Pointer — v5.4.0 style (points DOWN into wheel from top) ── */
.swc-pointer {
  position  : absolute;
  top       : 161px;           /* sits inside the wheel near the rim */
  left      : 50%;
  transform : translateX(-50%);
  width     : 0;
  height    : 0;
  border-left  : 16px solid transparent;
  border-right : 16px solid transparent;
  border-bottom: 28px solid var(--swc-pointer-color, #ffffff);
  z-index   : 60;
  filter    : drop-shadow(0 3px 6px rgba(0,0,0,.35));
}

/* ── Wheel circle ── */
.swc-wheel {
  width         : 100%;
  height        : 100%;
  border-radius : 50%;
  position      : relative;
  overflow      : hidden;
  background    : #e9f7e9;
  border        : 16px solid var(--swc-wheel-border);
  box-shadow    :
    0 14px 30px rgba(0,0,0,.35),
    inset 0 0 0 8px rgba(0,0,0,.08);
}

/* ── Inner — the only element that rotates ── */
.swc-wheel-inner {
  position      : absolute;
  inset         : 0;
  border-radius : 50%;
  transform     : rotate(0deg);
  will-change   : transform;
}

/* ── Label layer (unused by JS — kept for HTML compatibility) ── */
.swc-label-layer {
  position      : absolute;
  inset         : 0;
  border-radius : 50%;
  z-index       : 25;
  pointer-events: none;
}

/* ── Labels — live INSIDE swc-wheel-inner, rotate with it ── */
.swc-label {
  position      : absolute;
  z-index       : 20;
  max-width     : 160px;
  text-align    : center;
  white-space   : normal;
  line-height   : 1.15;
  /* defaults — overridden by JS inline styles from SWC settings */
  font-size     : 13px;
  font-weight   : 900;
  color         : #0a2a12;
  background    : rgba(255,255,255,.86);
  padding       : 6px 10px;
  border-radius : 12px;
  border        : 1px solid rgba(0,0,0,.08);
  box-shadow    : 0 6px 10px rgba(0,0,0,.10);
}

/* ── Center hub ── */
.swc-center {
  position      : absolute;
  left          : 50%;
  top           : 50%;
  transform     : translate(-50%, -50%);
  width         : 110px;
  height        : 110px;
  border-radius : 50%;
  background    : var(--swc-center-dot);
  z-index       : 60;
  box-shadow    : 0 10px 20px rgba(0,0,0,.25);
}
.swc-center::before {
  content       : '';
  position      : absolute;
  inset         : 14px;
  border-radius : 50%;
  background    : #111;
}

/* ── Right panel ── */
.swc-right { display: flex; flex-direction: column; gap: 0; }

.swc-heading {
  margin         : 0 0 10px;
  font-family    : var(--swc-font);
  font-size      : var(--swc-heading-size);
  font-weight    : var(--swc-heading-weight);
  letter-spacing : var(--swc-heading-ls);
  color          : var(--swc-subtext);
  line-height    : 1.2;
}

.swc-help {
  margin      : 0 0 20px;
  font-family : var(--swc-font);
  font-size   : var(--swc-subtext-size);
  color       : var(--swc-subtext);
  opacity     : .92;
  line-height : 1.5;
  max-width   : 640px;
}

/* ── Inputs ── */
#swcName, #swcEmail {
  width         : 100%;
  max-width     : 640px;
  padding       : 16px 18px;
  border-radius : var(--swc-radius-input);
  border        : 1.5px solid var(--swc-input-border);
  margin        : 12px 0;
  font-size     : var(--swc-input-size);
  font-family   : var(--swc-font);
  color         : var(--swc-input-text);
  background    : var(--swc-input-bg);
  outline       : none;
  box-sizing    : border-box;
  transition    : border-color .2s, box-shadow .2s;
}
#swcName:focus, #swcEmail:focus {
  border-color : var(--swc-primary);
  box-shadow   : 0 0 0 3px rgba(242,180,0,.2);
}
#swcName::placeholder, #swcEmail::placeholder { opacity: .55; }

/* ── Spin button ── */
#swcSpinBtn {
  width          : 100%;
  max-width      : 640px;
  padding        : 16px 18px;
  border-radius  : var(--swc-radius-btn);
  border         : 0;
  margin-top     : 10px;
  background     : var(--swc-btn-bg);
  color          : var(--swc-btn-text);
  font-family    : var(--swc-font);
  font-weight    : var(--swc-btn-weight);
  font-size      : var(--swc-btn-size);
  letter-spacing : var(--swc-btn-ls);
  cursor         : pointer;
  transition     : background .2s, transform .15s, box-shadow .2s;
  box-shadow     : 0 6px 20px rgba(0,0,0,.2);
}
#swcSpinBtn:hover:not(:disabled) {
  background : var(--swc-btn-hover);
  transform  : translateY(-2px);
  box-shadow : 0 10px 28px rgba(0,0,0,.3);
}
#swcSpinBtn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ── Buy button ── */
#swcBuyBtn {
  width          : 100%;
  max-width      : 640px;
  margin-top     : 14px;
  padding        : 15px 18px;
  border-radius  : var(--swc-radius-btn);
  border         : 1px solid rgba(255,255,255,.30);
  background     : var(--swc-buy-btn-bg);
  color          : var(--swc-buy-btn-text);
  font-family    : var(--swc-font);
  font-weight    : var(--swc-btn-weight);
  font-size      : var(--swc-btn-size);
  letter-spacing : var(--swc-btn-ls);
  cursor         : pointer;
  transition     : background .2s, transform .15s;
}
#swcBuyBtn:hover {
  background : var(--swc-buy-btn-hover);
  transform  : translateY(-2px);
}

/* ── Status bar ── */
.swc-status {
  margin-top  : 16px;
  font-family : var(--swc-font);
  font-size   : 16px;
  color       : var(--swc-text);
  opacity     : .95;
}
.swc-status strong, .swc-credits { color: var(--swc-primary); }

/* ── Result box ── */
.swc-result {
  margin-top    : 16px;
  max-width     : 640px;
  padding       : 14px;
  border-radius : 14px;
  border        : 1px solid rgba(255,255,255,.22);
  background    : var(--swc-result-bg);
  color         : var(--swc-result-text);
  font-family   : var(--swc-font);
  animation     : swcFadeIn .35s ease;
}
@keyframes swcFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.swc-ok  { border-color: rgba(140,255,160,.35) !important; }
.swc-err { border-color: rgba(255,140,140,.35) !important; }
.swc-small { margin-top: 10px; opacity: .9; font-size: 13px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .swc-box {
    grid-template-columns : 1fr;
    padding               : 20px;
  }
  .swc-wheel-wrap {
    width  : 340px;
    height : 340px;
    margin : 0 auto;
    /* Override CSS variable for smaller screens */
    --swc-wheel-size : 340px;
  }
  .swc-heading { font-size: max(26px, calc(var(--swc-heading-size) * 0.75)); }
  .swc-label   { max-width: 120px; }
  .swc-pointer { top: 110px; }
}

@media (max-width: 520px) {
  .swc-wheel-wrap {
    width  : 280px;
    height : 280px;
    --swc-wheel-size : 280px;
  }
  .swc-pointer { top: 90px; }
  .swc-label   { max-width: 90px; font-size: 10px !important; }
  .swc-center  { width: 70px; height: 70px; }
  .swc-center::before { inset: 10px; }
}