/* Back to Winning LMT — campaign styles */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #6a55b0;
  font-family: 'Baloo 2', 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, #8a76d4 0%, #6a55b0 55%, #55429a 100%);
}

/* 9:16 design stage — 1080x1920 artwork scaled responsively */
.stage {
  position: relative;
  width: min(100vw, calc(100dvh * 0.5625));
  aspect-ratio: 1080 / 1920;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(120, 60, 160, .25);
}

.hidden { display: none !important; }

/* ---------- invisible hit zones over baked-in buttons ---------- */
.hit {
  position: absolute;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: filter .15s;
}
.hit:active { filter: brightness(1.1); }
.hit:disabled { cursor: default; }

/* pressed visual feedback overlay */
.hit.pressed { background: rgba(255, 255, 255, .25); border-radius: 12px; }

/* ---------- SPIN PAGE ----------
   Artwork wheel: centre (540, 851), outer radius 326 on the 1080x1920 stage. */
#wheel {
  position: absolute;
  left: 19.815%;
  top: 27.344%;
  width: 60.370%;
  will-change: transform;
  pointer-events: none;
}

@keyframes wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#wheel.spinning { animation: wheel-spin .55s linear infinite; }

#knob {
  position: absolute;
  left: 50%;
  top: 44.323%;
  width: 11.383%;
  transform: translate(-50%, -59.23%);
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(40, 15, 70, .45));
}

#btnStart { left: 28.889%; top: 63.75%; width: 18.889%; height: 3.073%; }
#btnStop  { left: 52.222%; top: 63.75%; width: 18.889%; height: 3.073%; }

#btnStart.dim, #btnStop.dim {
  background: rgba(255, 255, 255, .25);
  border-radius: 10px;
}

/* ---------- RESULT PAGE ---------- */
#btnDownload { left: 38.611%; top: 50.365%; width: 24.630%; height: 3.229%; }

.btn-again {
  position: absolute;
  left: 50%;
  top: 67.708%;
  transform: translateX(-50%);
  width: 30%;
  border: 0.28cqw solid #e0e0e0;
  border-radius: 12px;
  background: linear-gradient(180deg, #e8e5f0 0%, #b3a2cc 22%, #7154a4 52%);
  box-shadow: 0 5px 14px rgba(50, 25, 100, .45), inset 0 0 0 0.19cqw #7154a4;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: clamp(13px, 3.2cqw, 27px);
  padding: 1.2cqw 0;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(60, 30, 100, .4);
}
.btn-again:active { transform: translateX(-50%) translateY(1px); filter: brightness(1.08); }

/* ---------- FORM PAGE ---------- */
.stage { container-type: inline-size; }

/* real card that sits over (and fully covers) the baked-in artwork card,
   so it can grow taller than the artwork version.
   Artwork card: x 161-919, y 441-1291, 6px #0079f4 frame, 66px corner radius. */
.form-card {
  position: absolute;
  left: 14.907%;
  top: 22.969%;
  width: 70.278%;
  min-height: 44.323%;
  background: #f2f1f7;
  border: 0.556cqw solid #0079f4;
  border-radius: 6.1cqw;
  box-shadow: 0 1.6cqw 4cqw rgba(40, 15, 80, .3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .95cqw;
  padding: 2.1cqw 4.4cqw;
}

.grp { display: flex; flex-direction: column; gap: .5cqw; text-align: left; min-width: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }

.lbl {
  color: #4936a0;
  font-weight: 700;
  font-size: clamp(8px, 1.95cqw, 16px);
}
.lbl i { color: #e3383f; font-style: normal; }

.form-card .fld {
  width: 100%;
  border: 2px solid #a99adc;
  border-radius: 9px;
  background-color: #ffffff;
  color: #3c2a7d;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(10px, 2.15cqw, 18px);
  padding: 1.25cqw 1.9cqw;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-card select.fld {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234936a0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2.2cqw center;
  background-size: 2.2cqw auto;
  cursor: pointer;
}
.form-card .fld:focus { border-color: #0079f4; box-shadow: 0 0 0 3px rgba(0, 121, 244, .2); }
.form-card .fld::placeholder { color: #a99adc; font-weight: 500; }
.form-card select.fld:invalid { color: #a99adc; font-weight: 500; }  /* "Select Emirate" placeholder look */

.file-fld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4cqw;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  padding-top: .8cqw;
  padding-bottom: .8cqw;
}
.file-fld span.tag {
  background: linear-gradient(180deg, #e8e5f0 0%, #b3a2cc 24%, #7154a4 58%);
  border: 1.5px solid #e0e0e0;
  box-shadow: 0 2px 5px rgba(60, 35, 110, .4), inset 0 0 0 1.5px #7154a4;
  color: #fff;
  border-radius: 8px;
  padding: .7cqw 1.8cqw;
  flex: 0 0 auto;
  font-size: .82em;
  font-weight: 700;
}
.file-fld span.name { color: #a99adc; overflow: hidden; text-overflow: ellipsis; }
.file-fld.has-file span.name { color: #3c2a7d; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 1.4cqw;
  color: #3c2a7d;
  font-size: clamp(8px, 1.95cqw, 16px);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.consent input {
  width: 1.2em; height: 1.2em;
  margin-top: .1em;
  accent-color: #7154a4;
  flex: 0 0 auto;
  cursor: pointer;
}
.consent a { color: #0079f4; font-weight: 700; text-decoration: none; }
.consent a:hover { text-decoration: underline; }
.consent + .consent { margin-top: -0.6cqw; }

.btn-cta {
  align-self: center;
  width: 42%;
  border: 0.28cqw solid #e0e0e0;
  border-radius: 11px;
  background: linear-gradient(180deg, #e8e5f0 0%, #b3a2cc 22%, #7154a4 52%);
  box-shadow: 0 5px 14px rgba(50, 25, 100, .45), inset 0 0 0 0.19cqw #7154a4;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: clamp(12px, 3cqw, 25px);
  padding: 1.15cqw 0;
  margin-top: .8cqw;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(60, 30, 100, .4);
}
.btn-cta:active { transform: translateY(1px); filter: brightness(1.08); }
.btn-cta:disabled { opacity: .6; cursor: wait; }

.form-error {
  color: #d63384;
  font-size: clamp(9px, 2.1cqw, 16px);
  font-weight: 700;
  text-align: center;
  min-height: 1.3em;
}

/* ---------- terms & conditions modal ---------- */
.tnc-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(58, 32, 96, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.tnc-box {
  position: relative;
  background: #ffffff;
  border: 3px solid #7b48c5;
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(60, 25, 105, .4);
  width: 560px;
  max-width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 30px 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: 'Baloo 2', sans-serif;
}
.tnc-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #ece5f8;
  color: #5f3f9e;
  font-size: 15px;
  cursor: pointer;
}
.tnc-title {
  color: #5f3f9e;
  font-weight: 800;
  font-size: clamp(22px, 6vw, 30px);
  text-align: center;
}
.tnc-langs { display: flex; gap: 10px; }
.tnc-lang {
  border: 2px solid #b9a3dd;
  border-radius: 999px;
  background: #ffffff;
  color: #5f3f9e;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 7px 24px;
  cursor: pointer;
}
.tnc-lang.on {
  background: linear-gradient(180deg, #8d6cc9, #6a4aa8);
  border-color: #6a4aa8;
  color: #fff;
}
.tnc-list {
  color: #3c2a63;
  font-weight: 600;
  font-size: clamp(13px, 3.8vw, 16px);
  line-height: 1.45;
  padding-inline-start: 1.4em;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tnc-ok { width: 40%; min-width: 130px; }

/* ---------- loading overlay ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(58, 32, 96, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.spinner {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, .3);
  border-top-color: #ffffff;
  animation: spin-loader .8s linear infinite;
}
@keyframes spin-loader {
  to { transform: rotate(360deg); }
}
.loader-text {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(14px, 4vw, 20px);
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(40, 15, 70, .5);
}

/* toast for status / errors on other pages */
.toast {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  background: rgba(75, 45, 130, .92);
  color: #fff;
  font-weight: 700;
  font-size: clamp(11px, 2.4cqw, 20px);
  padding: .6em 1.4em;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; }