/* SWC Frontend CSS v7.0.0
   4 Layouts: classic (wheel-left), centered, top-wheel, minimal (wheel-right)
   Device-optimized with per-device wheel size controls from admin.
   ------------------------------------------------------------------ */

/* ── 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    : 36px;
  --swc-subtext-size    : 15px;
  --swc-btn-size        : 16px;
  --swc-input-size      : 15px;
  --swc-heading-weight  : 700;
  --swc-btn-weight      : 700;
  --swc-heading-ls      : 2px;
  --swc-btn-ls          : 2px;
  --swc-radius-box      : 24px;
  --swc-radius-btn      : 50px;
  --swc-radius-input    : 12px;
  --swc-wheel-size      : 320px;
  --swc-box-padding     : 40px;
  --swc-box-shadow      : 0 30px 80px rgba(0,0,0,.5);

  /* Per-device wheel sizes — set by PHP from admin device settings */
  --swc-wheel-size-desktop : 320px;
  --swc-wheel-size-tablet  : 280px;
  --swc-wheel-size-mobile  : 240px;
}

/* ═══════════════════════════════════════════════
   SHARED BASE — applies to ALL layouts
   ═══════════════════════════════════════════════ */

.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);
  box-shadow    : var(--swc-box-shadow);
  font-family   : var(--swc-font);
}

.swc-wheel-wrap {
  position    : relative;
  width       : var(--swc-wheel-size-desktop);
  height      : var(--swc-wheel-size-desktop);
  flex-shrink : 0;
}

/* Pointer sits ~33.5% from top edge — updated by JS too */
.swc-pointer {
  position  : absolute;
  left      : 50%;
  transform : translateX(-50%);
  width     : 0;
  height    : 0;
  border-left  : 14px solid transparent;
  border-right : 14px solid transparent;
  border-bottom: 26px solid var(--swc-pointer-color, #ffffff);
  z-index   : 60;
  filter    : drop-shadow(0 3px 6px rgba(0,0,0,.4));
  top       : calc(var(--swc-wheel-size-desktop) * 0.335);
}

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

.swc-wheel-inner {
  position      : absolute;
  inset         : 0;
  border-radius : 50%;
  transform     : rotate(0deg);
  will-change   : transform;
}

.swc-label-layer {
  position      : absolute;
  inset         : 0;
  border-radius : 50%;
  z-index       : 25;
  pointer-events: none;
}

.swc-label {
  position      : absolute;
  z-index       : 20;
  max-width     : 120px;
  text-align    : center;
  white-space   : normal;
  line-height   : 1.2;
  font-size     : 11px;
  font-weight   : 700;
  color         : #0a2a12;
  background    : rgba(255,255,255,.88);
  padding       : 4px 8px;
  border-radius : 8px;
  border        : 1px solid rgba(0,0,0,.08);
  box-shadow    : 0 3px 7px rgba(0,0,0,.12);
}

.swc-center {
  position      : absolute;
  left          : 50%;
  top           : 50%;
  transform     : translate(-50%, -50%);
  width         : calc(var(--swc-wheel-size-desktop) * 0.22);
  height        : calc(var(--swc-wheel-size-desktop) * 0.22);
  border-radius : 50%;
  background    : var(--swc-center-dot);
  z-index       : 60;
  box-shadow    : 0 8px 18px rgba(0,0,0,.25);
}
.swc-center::before {
  content       : '';
  position      : absolute;
  inset         : 10px;
  border-radius : 50%;
  background    : #111;
}

.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-text);
  line-height    : 1.2;
}
.swc-help {
  margin      : 0 0 18px;
  font-family : var(--swc-font);
  font-size   : var(--swc-subtext-size);
  color       : var(--swc-subtext);
  opacity     : .92;
  line-height : 1.5;
}

#swcName, #swcEmail {
  width         : 100%;
  padding       : 14px 16px;
  border-radius : var(--swc-radius-input);
  border        : 1.5px solid var(--swc-input-border);
  margin        : 8px 0 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;
  display       : block;
}
#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; }

#swcSpinBtn {
  display        : block;
  width          : 100%;
  padding        : 15px 18px;
  border-radius  : var(--swc-radius-btn);
  border         : 0;
  margin-top     : 12px;
  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; }

#swcBuyBtn {
  display        : block;
  width          : 100%;
  margin-top     : 12px;
  padding        : 14px 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);
}

.swc-status {
  margin-top  : 14px;
  font-family : var(--swc-font);
  font-size   : 14px;
  color       : var(--swc-text);
  opacity     : .9;
}
.swc-status strong, .swc-credits { color: var(--swc-primary); }

.swc-result {
  margin-top    : 14px;
  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: 8px; opacity: .9; font-size: 13px; }


/* ═══════════════════════════════════════════════
   LAYOUT 1 — Classic  (wheel LEFT, form RIGHT)
   ═══════════════════════════════════════════════ */

.swc-layout-classic {
  display               : grid;
  grid-template-columns : var(--swc-wheel-size-desktop) 1fr;
  gap                   : 40px;
  align-items           : center;
}
.swc-layout-classic .swc-left  { display: flex; justify-content: center; }
.swc-layout-classic .swc-right { display: flex; flex-direction: column; }


/* ═══════════════════════════════════════════════
   LAYOUT 2 — Centered  (wheel top, form below, centered column)
   ═══════════════════════════════════════════════ */

.swc-layout-centered {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
  max-width      : 680px;
}
.swc-layout-centered .swc-left  { display: flex; justify-content: center; margin-bottom: 26px; }
.swc-layout-centered .swc-right {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  width          : 100%;
}
.swc-layout-centered #swcName,
.swc-layout-centered #swcEmail,
.swc-layout-centered #swcSpinBtn,
.swc-layout-centered #swcBuyBtn,
.swc-layout-centered .swc-result { max-width: 420px; width: 100%; }
.swc-layout-centered .swc-heading,
.swc-layout-centered .swc-help,
.swc-layout-centered .swc-status { text-align: center; }


/* ═══════════════════════════════════════════════
   LAYOUT 3 — Top Wheel  (large wheel centred top, 2-col form below)
   ═══════════════════════════════════════════════ */

.swc-layout-top-wheel {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
  max-width      : 900px;
}
.swc-layout-top-wheel .swc-top-section {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  margin-bottom  : 28px;
}
.swc-layout-top-wheel .swc-top-section .swc-left {
  display        : flex;
  justify-content: center;
  margin-bottom  : 22px;
}
.swc-layout-top-wheel .swc-text-block { text-align: center; }
.swc-layout-top-wheel .swc-form-section {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 18px;
  width                 : 100%;
  max-width             : 700px;
  align-items           : start;
}
.swc-layout-top-wheel .swc-btns-wrap { display: flex; flex-direction: column; }
.swc-layout-top-wheel .swc-form-full { grid-column: span 2; }
.swc-layout-top-wheel .swc-status    { grid-column: span 2; text-align: center; margin-top: 6px; }
.swc-layout-top-wheel .swc-result    { grid-column: span 2; text-align: left; }


/* ═══════════════════════════════════════════════
   LAYOUT 4 — Minimal  (form LEFT, wheel RIGHT — glassmorphism)
   ═══════════════════════════════════════════════ */

.swc-layout-minimal {
  position              : relative;
  display               : grid;
  grid-template-columns : 1fr var(--swc-wheel-size-desktop);
  gap                   : 32px;
  align-items           : center;
  max-width             : 860px;
  /* bg/color/shadow all inherited from .swc-box — no override */
  backdrop-filter       : blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border                : 1px solid rgba(255,255,255,0.15);
}
.swc-layout-minimal::before {
  content       : '';
  position      : absolute;
  top           : 0; left: 0; right: 0;
  height        : 3px;
  background    : linear-gradient(90deg, transparent, var(--swc-primary), transparent);
  border-radius : var(--swc-radius-box) var(--swc-radius-box) 0 0;
  pointer-events: none;
}
.swc-layout-minimal .swc-left  { order: 2; display: flex; justify-content: center; }
.swc-layout-minimal .swc-right { order: 1; display: flex; flex-direction: column; }
.swc-layout-minimal .swc-heading { font-size: calc(var(--swc-heading-size) * 0.88); }


/* ═══════════════════════════════════════════════
   TABLET  (≤ 900px)
   ═══════════════════════════════════════════════ */

@media (max-width: 900px) {
  .swc-wheel-wrap {
    width  : var(--swc-wheel-size-tablet);
    height : var(--swc-wheel-size-tablet);
  }
  .swc-pointer { top: calc(var(--swc-wheel-size-tablet) * 0.335); }
  .swc-center  {
    width : calc(var(--swc-wheel-size-tablet) * 0.22);
    height: calc(var(--swc-wheel-size-tablet) * 0.22);
  }

  /* Classic → stack */
  .swc-layout-classic {
    grid-template-columns : 1fr;
    text-align            : center;
  }
  .swc-layout-classic .swc-left { justify-content: center; margin-bottom: 22px; }

  /* Top wheel → single-col form */
  .swc-layout-top-wheel .swc-form-section {
    grid-template-columns : 1fr;
  }
  .swc-layout-top-wheel .swc-form-full,
  .swc-layout-top-wheel .swc-status,
  .swc-layout-top-wheel .swc-result { grid-column: span 1; }

  /* Minimal → stack */
  .swc-layout-minimal {
    grid-template-columns : 1fr;
    text-align            : center;
  }
  .swc-layout-minimal .swc-left  { order: 1; justify-content: center; margin-bottom: 20px; }
  .swc-layout-minimal .swc-right { order: 2; }
}


/* ═══════════════════════════════════════════════
   MOBILE  (≤ 520px)
   ═══════════════════════════════════════════════ */

@media (max-width: 520px) {
  .swc-box {
    padding       : 20px 16px;
    margin        : 12px 8px;
    border-radius : calc(var(--swc-radius-box) * 0.75);
  }

  .swc-wheel-wrap {
    width  : var(--swc-wheel-size-mobile);
    height : var(--swc-wheel-size-mobile);
  }
  .swc-pointer { top: calc(var(--swc-wheel-size-mobile) * 0.335); }
  .swc-center  {
    width : calc(var(--swc-wheel-size-mobile) * 0.22);
    height: calc(var(--swc-wheel-size-mobile) * 0.22);
  }
  .swc-center::before { inset: 7px; }

  .swc-label {
    max-width  : 75px;
    font-size  : 9px !important;
    padding    : 3px 5px;
  }

  .swc-heading {
    font-size    : max(20px, calc(var(--swc-heading-size) * 0.7));
    letter-spacing: 0;
  }
  #swcName, #swcEmail   { padding: 12px 14px; }
  #swcSpinBtn, #swcBuyBtn { padding: 13px 14px; }

  /* All layouts collapse to single column on mobile */
  .swc-layout-classic,
  .swc-layout-minimal {
    grid-template-columns : 1fr;
  }
  .swc-layout-minimal .swc-left  { order: 1; margin-bottom: 16px; }
  .swc-layout-minimal .swc-right { order: 2; }
  .swc-layout-top-wheel .swc-form-section { grid-template-columns: 1fr; }
}
#swcName::placeholder,
#swcEmail::placeholder {
  color: var(--swc-input-placeholder);
  opacity: 1;
}

.swc-coupon-fallback { margin-top: 8px; }

.swc-coupon-code {
    display       : inline-block;
    margin        : 10px 0 8px;
    padding       : 10px 20px;
    background    : var(--swc-input-bg);
    border        : 2px dashed var(--swc-primary);
    border-radius : 10px;
    font-size     : 20px;
    font-weight   : 800;
    letter-spacing: 3px;
    color         : var(--swc-input-text);
    font-family   : monospace;
    word-break    : break-all;
}

.swc-copy-btn {
    display       : block;
    padding       : 8px 20px;
    border-radius : var(--swc-radius-btn);
    border        : none;
    background    : var(--swc-buy-btn-bg);
    color         : var(--swc-buy-btn-text);
    font-family   : var(--swc-font);
    font-size     : 13px;
    font-weight   : 700;
    cursor        : pointer;
    transition    : background .2s, color .2s;
}

.swc-copy-btn:hover {
    background : var(--swc-buy-btn-hover);
}