/* WP Lucky Wheel Discounts (FA) */
@font-face {
  font-family: 'Peyda';
  src: url('../fonts/PeydaWebNoEn-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --wplwfa-bg: radial-gradient(1200px 800px at 50% -10%, #ffe7f3 0%, #fff 40%, #f5f8ff 100%);
  --wplwfa-primary: #7c3aed;
  --wplwfa-primary-2: #06b6d4;
  --wplwfa-text: #0f172a;
  --wplwfa-sub: #475569;
  --wplwfa-card: #ffffffcc;
  --wplwfa-shadow: 0 20px 60px rgba(124,58,237,.18);
}

.wplwfa-wrap {
  font-family: 'Peyda', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--wplwfa-bg);
  padding: 32px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wplwfa-card {
  max-width: 860px;
  width: 100%;
  background: var(--wplwfa-card);
  backdrop-filter: blur(6px);
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--wplwfa-shadow);
  border: 1px solid #eef2ff;
}

.wplwfa-title {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.2;
  color: var(--wplwfa-text);
  letter-spacing: -.3px;
}

.wplwfa-subtitle {
  margin: 0 0 24px;
  color: var(--wplwfa-sub);
}

.wplwfa-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 24px;
}

.wplwfa-form label {
  grid-column: 1 / -1;
  color: var(--wplwfa-text);
  font-weight: 700;
  margin-bottom: -6px;
}

.wplwfa-phone {
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 16px;
  background: #fff;
  transition: .2s border, .2s box-shadow;
  text-align: left;
  direction: ltr;
}
.wplwfa-phone:focus {
  outline: none;
  border-color: var(--wplwfa-primary);
  box-shadow: 0 0 0 4px rgba(124,58,237,.12);
}

.wplwfa-spin-btn {
  border: 0;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 700;
  background-image: linear-gradient(135deg, var(--wplwfa-primary), var(--wplwfa-primary-2));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(124,58,237,.25);
  transition: transform .06s ease;
}
.wplwfa-spin-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}
.wplwfa-spin-btn:active {
  transform: translateY(1px);
}

.wplwfa-stage {
  position: relative;
  display: grid;
  place-items: center;
  margin: 8px auto 16px;
  justify-content: center;
  text-align: center;
}


.wplwfa-wheel {
  will-change: transform;

  width: min(96vw, 520px);
  height: auto;
  filter: drop-shadow(0 18px 50px rgba(15,23,42,.18));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #f8fafc 40%, #eef2ff 100%);
  touch-action: manipulation;
}


.wplwfa-pointer {
  position: absolute;
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 30px solid #0ea5e9;
  top: -6px;
  filter: drop-shadow(0 10px 16px rgba(14,165,233,.45));
}


.wplwfa-result {
  background: #f8fafc;
  border: 1px dashed #c7d2fe;
  padding: 16px;
  border-radius: 14px;
}
.wplwfa-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  display: inline-block;
  margin: 6px 0 0;
  letter-spacing: .8px;
}
.wplwfa-tt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.wplwfa-results {
  font-family: 'Peyda', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.wplwfa-table {
  width: 100%;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.wplwfa-table th, .wplwfa-table td {
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.wplwfa-table thead th {
  background: #f8fafc;
  font-weight: 700;
}
@media (max-width: 640px) {
  .wplwfa-form { grid-template-columns: 1fr; }
}


/* Accessibility & mobile-friendly sizes */
.wplwfa-wrap { padding: 24px 12px; }
.wplwfa-title { font-size: clamp(22px, 4.6vw, 32px); }
.wplwfa-subtitle { font-size: clamp(14px, 3.6vw, 16px); }
.wplwfa-card { padding: clamp(16px, 4vw, 32px); }

.wplwfa-phone {
  padding: 16px 18px;
  font-size: 18px;
  min-height: 48px;
}
.wplwfa-spin-btn {
  padding: 16px 18px;
  min-height: 48px;
  font-size: 16px;
}


.wplwfa-pointer {
  position: absolute;
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 30px solid #0ea5e9;
  top: -6px;
  filter: drop-shadow(0 10px 16px rgba(14,165,233,.45));
}


.wplwfa-result { font-size: clamp(14px, 3.6vw, 16px); }

/* Responsive results table */
.wplwfa-results { overflow-x: auto; }
.wplwfa-results .wplwfa-table { min-width: 640px; }

@media (max-width: 640px) {
  .wplwfa-form { grid-template-columns: 1fr; }
  .wplwfa-form label { font-size: 14px; }
}

/* mobile v1.3 additions */
.wplwfa-stage {
  position: relative;
  display: grid;
  place-items: center;
  margin: 8px auto 16px;
  justify-content: center;
  text-align: center;
}

@media (max-width: 480px){
  .wplwfa-spin-btn{ font-size: 17px; min-height: 52px; }
  .wplwfa-phone{ font-size: 18px; min-height: 50px; }
}


@media (max-width: 640px) {
  .wplwfa-stage {
  position: relative;
  display: grid;
  place-items: center;
  margin: 8px auto 16px;
  justify-content: center;
  text-align: center;
}

  .wplwfa-title { font-size: 20px; }
  .wplwfa-subtitle { font-size: 13px; }
  .wplwfa-phone { font-size: 15px; }
  .wplwfa-spin-btn { font-size: 15px; }
}

/* Smaller typography for mobile */
@media (max-width: 640px) {
  .wplwfa-title { font-size: clamp(20px, 4.2vw, 28px); }
  .wplwfa-subtitle { font-size: clamp(13px, 3.2vw, 15px); }
  .wplwfa-phone { font-size: 16px; min-height: 44px; }
  .wplwfa-spin-btn { font-size: 15px; min-height: 44px; }
}