/* ============================================================
   "Пътувай с PEPSI" campaign — index_game2.html
   Desktop: key-visual matching the approved mockup —
   form far-left (full height), cup centre, headline + panels
   top-right, instructions on the light-blue band, legal strip.
   Mobile: stacked.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Gagalin'; src: url('assets/fonts/Gagalin-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Axiforma'; src: url('assets/fonts/Axiforma-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'AxiformaBlack'; src: url('assets/fonts/Axiforma-Black.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'AxiformaThin'; src: url('assets/fonts/Axiforma-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'AxiformaBold'; src: url('assets/fonts/Axiforma-Black.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'AxiformaHeavyItalic'; src: url('assets/fonts/Axiforma-Black.otf') format('opentype'); font-display: swap; }

/* ---------- Palette ---------- */
:root {
  --navy-deep: #05060d;
  --navy: #16204f;
  --royal: #223ca8;
  --royal-bright: #2a49c8;
  --lightblue: #7ba0d6;
  --band-text: #12235f;
  --pepsi-blue: #0b56d0;
  --pepsi-blue-dark: #0940a3;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; padding: 0; background-color: var(--navy-deep); color: #fff; font-family: Axiforma, sans-serif; }
img { max-width: 100%; }

/* ============================================================
   KEY VISUAL (desktop)
   ============================================================ */
.kv {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--navy-deep) url('assets/bg_circle.svg') center center / cover no-repeat;
  background-position-x: -4vw;
  overflow: hidden;
}
.kv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 80% at 62% 40%, rgba(40, 72, 190, 0.35) 0%, rgba(10, 20, 60, 0.10) 55%, rgba(5, 6, 13, 0) 78%);
  z-index: 0;
  pointer-events: none;
}
/* Full-width stage. Zones are anchored (form left, cup centre, KV block
   right) and everything is sized by HEIGHT (cqh), so the composition
   stays consistent and the right block stays pinned to the edge at any
   width — the flexible horizontal gaps are filled by the dot backdrop. */
.kv-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;          /* fill viewport: top block pinned top, band pinned bottom */
  min-height: 560px;
  container-type: size;
  /* Scale unit: equals cqh on wide screens (>= ~16:9) so the art fills the
     height; on narrower screens it shrinks with WIDTH so nothing overlaps. */
  --u: min(1cqh, 0.54cqw);
}

/* Wrapper is transparent on desktop (children anchor to .kv-stage);
   becomes the grouped "top block" on mobile. */
.kv-art { display: contents; }
.kv-shapes { display: none; }
.mobile-header { display: none; }

/* ----- Layered panels (big blue shape pinned to the right edge) ----- */
.corner-decor {
  position: absolute;
  right: 0;
  top: 0;
  height: calc(73 * var(--u));
  width: auto;
  z-index: 0;
  pointer-events: none;
}

/* ----- Headline art: "Пътувай с PEPSI" (single SVG) ----- */
.headline-art {
  position: absolute;
  right: calc(3 * var(--u));
  top: calc(3 * var(--u));
  height: calc(23 * var(--u));
  width: auto;
  z-index: 2;
}

/* ----- Cup (centre) ----- */
.cup {
  position: absolute;
  left: 45%;
  top: -10%;
  transform: translateX(-50%);
  height: calc(90 * var(--u));
  width: auto;
  object-fit: contain;
  z-index: 3;
}

/* ----- Prize art: "УЧАСТВАЙ ЗА 24 КУФАРА" + AT logo (single SVG) ----- */
.prize-art {
  position: absolute;
  right: calc(15 * var(--u));
  top: calc(32 * var(--u));
  height: calc(32 * var(--u));
  width: auto;
  transform: translateX(-50%);
  z-index: 2;
}

/* ----- Model caption tag (left of suitcase) ----- */
.model-cap {
  position: absolute;
  right: 1%;
  top: 45%;
  width: 9.5%;
  margin: 0;
  z-index: 2;
  background: var(--lightblue);
  color: var(--band-text);
  border-radius: 3px;
  padding: 0.6% 0.7%;
  text-align: center;
  font-family: AxiformaBlack, sans-serif;
  font-size: 1.15cqw;
  line-height: 1.12;
}

/* ----- Suitcase (bottom-right) ----- */
.suitcase {
  position: absolute;
  right: calc(-10 * var(--u));
  bottom: calc(13 * var(--u));
  height: calc(58 * var(--u));
  width: auto;
  object-fit: contain;
  z-index: 3;
}

/* ----- Bottom band (bottom_bg): steps on light-blue, legal on dark ----- */
.bottom-band {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 74%;
  height: 24%;
  z-index: 2;
  background: url('assets/bottom_bg.png') right bottom / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
}
.steps {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1% 0 0 14%;
}
.steps-art {
  height: 74%;
  width: auto;
  max-width: 62%;
  object-fit: contain;
}
.legal-line {
  margin: 0;
  padding: 0 4% 0.5% 13%;
  height: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-family: Axiforma, sans-serif;
  font-size: min(0.72cqw, 1.15cqh);
}
.legal-line span { display: inline-block; line-height: 1.25; }
.legal-line a { color: #fff; text-decoration: underline; white-space: nowrap; }

/* ----- Prize photo disclaimer ----- */
.illustrative {
  position: absolute;
  right: 1.5%;
  bottom: 7%;
  width: 15%;
  margin: 0;
  z-index: 4;
  text-align: center;
  font-size: min(0.82cqw, 1.35cqh);
  color: var(--band-text);
}

/* ============================================================
   FORM (far-left, full height; IDs must match app.js)
   ============================================================ */
.mainForm {
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: 28%;
  min-width: 340px;
  max-width: 460px;
  background: #ffffff;
  color: #222;
  border-radius: 18px;
  padding: 0.9rem 1.4rem 1.1rem;
  text-align: center;
  filter: drop-shadow(-4px 6px 16px rgb(0 0 0 / 0.5));
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}
.logoForm { max-width: 62px !important; margin: 0.2rem auto 0.1rem !important; }
.form-title { font-family: Gagalin, sans-serif; color: var(--royal); font-size: 1.35rem; margin: 0 0 0.7rem; line-height: 1; }

.mb-3 { width: 100%; margin: 0 auto 0.85rem; display: flex; justify-content: center; gap: 6px; position: relative; }
.form-input {
  width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.4rem;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-size: 15px; font-family: Axiforma, sans-serif;
}
.form-input:focus { border-color: var(--pepsi-blue); box-shadow: 0 0 0 3px rgba(11, 86, 208, 0.22); }
.info { position: absolute; right: 0; margin-top: 9px; margin-right: 4%; display: inline-block; }
.info:hover { cursor: pointer; }
.obrazec { position: absolute; max-width: 82%; right: 0; margin-top: -8%; z-index: 99999; display: none; filter: drop-shadow(-4px 6px 8px rgb(0 0 0 / 0.3)); }

.custom-file-button { position: relative; display: flex; justify-content: center; align-items: center; }
.file-upload-label {
  position: relative; z-index: 20; color: #fff; background-color: var(--royal);
  text-align: center; display: flex; align-items: center; justify-content: center;
  border-radius: 0.4rem; padding: 0.5rem 0.75rem; border: none; width: 100%;
  font-family: Axiforma, sans-serif; font-size: 15px; cursor: pointer; transition: background-color 0.2s;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.file-upload-label:hover { background-color: var(--royal-bright); }
.file-upload-input { display: none; }

table { width: 100%; margin: auto; border-spacing: 0 6px; border-collapse: separate; }
.mb-3 p { width: 97%; font-family: Axiforma, sans-serif; text-align: left; font-size: 0.72rem; line-height: 1.25; margin: 0; color: #333; }
.mb-3 p a { color: var(--pepsi-blue); }
.switch { position: relative; width: 34px; height: 14px; float: right; }
.switch input { opacity: 0; }
.toggle { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d8d7d7; }
.toggle.round { border-radius: 34px; }
.toggle:before { position: absolute; content: ""; height: 20px; width: 20px; left: 0; bottom: -3px; background-color: #6d6d6d; border-radius: 50%; transition: transform 0.2s, background-color 0.2s; }
input:checked + .toggle:before { transform: translateX(14px); background-color: var(--pepsi-blue); }
.align-middle { vertical-align: middle; }
.devider { width: 90%; height: 1px; background-color: #e0e0e0; margin: 0.5rem auto 0.35rem; }

#submBtn.btn-submit-style {
  margin: 0.4rem auto 0; width: 100%; padding: 0.55rem 1rem;
  background-color: var(--pepsi-blue); color: #fff;
  font-family: AxiformaBlack, sans-serif; font-size: 1.2rem; letter-spacing: 0.5px;
  border: none; border-radius: 0.4rem; cursor: pointer; transition: background-color 0.15s;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}
#submBtn.btn-submit-style:hover { background-color: var(--pepsi-blue-dark); }
#status { font-family: AxiformaBold, sans-serif; color: #eb5757; text-align: center; padding: 0.3rem 0 0; font-size: 0.78rem; margin: 0; }

/* ---- Narrow billboard (4:3 .. 17:10): grow the cup & suitcase to fill
        the extra vertical space. Wider screens keep the base sizes. ---- */
@media only screen and (min-width: 1024px) and (max-aspect-ratio: 17 / 10) {
  .cup { height: min(90cqh, calc(110 * var(--u))); }
  .suitcase {
    right: calc(-13 * var(--u));
    height: min(62cqh, calc(75 * var(--u)));
  }
}

/* ============================================================
   STACKED LAYOUT — phones, tablets, AND any tall/near-square screen
   (a horizontal billboard can't fill a near-square viewport, so we
   stack into a centered column instead).
   ============================================================ */
@media only screen and (max-width: 1023px),
       only screen and (max-aspect-ratio: 4 / 3) {
  .kv {
    min-height: 0; display: block;
    background: var(--navy-deep) url('assets/bg_circle.svg') no-repeat;
    background-size: 300%;
    background-position-x: center;
    background-position-y: -10%;
  }
  .kv::before {
    background:
      radial-gradient(80% 40% at 50% 26%, rgba(50, 86, 210, 0.4) 0%, rgba(10, 20, 60, 0) 70%);
  }
  .kv-stage {
    width: 100%; aspect-ratio: auto;
    height: auto; min-height: 0;
    container-type: normal;
    display: flex; flex-direction: column; align-items: center;
    padding: 0;   /* header image goes edge-to-edge */
  }

  .model-cap { display: none; }

  .cup, .bottom-band, .illustrative, .mainForm {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto; max-width: none; transform: none;
  }

  /* Mobile: the whole top section is one image (mobile_header.png), so the
     individually-composed pieces and the steps/disclaimer are hidden. */
  .mobile-header { display: block; width: 100%; height: auto; margin-bottom: 1rem; position: relative; z-index: 2; }
  .kv-art { display: none; }
  .steps, .illustrative { display: none; }

  /* Cup tucks up under the header image */
  .cup { height: auto; max-width: 60%; margin: -20% auto 1.2rem; position: relative; z-index: 1; }

  .bottom-band {
    order: 3;                              /* legal line goes below the form */
    width: 100%; max-width: 440px; height: auto;
    margin: 0.2rem auto 1.4rem; background: none;
    display: flex; flex-direction: column;
  }
  .steps {
    width: 100%; height: auto; padding: 20px;
    background: var(--lightblue); border-radius: 12px;
    justify-content: center;
  }
  .steps-art { height: auto; width: 100%; max-width: 100%; }
  .legal-line {
    height: auto; padding: 12px 18px 0; font-size: 0.66rem;
    color: rgba(255,255,255,0.85); flex-direction: column;
  }

  .illustrative { text-align: center; width: 100%; font-size: 0.72rem; color: rgba(255,255,255,0.7); margin: 0.6rem 0 1.2rem; }

  .mainForm {
    width: calc(100% - 2rem); max-width: 440px; min-width: 0;
    margin: 3% auto 1.6rem; padding: 1rem 1.3rem 1.2rem; border-radius: 22px;
  }
  .logoForm { max-width: 74px !important; }
  .form-title { font-size: 1.5rem; }
  .form-input, .file-upload-label { font-size: 16px; }
  .mb-3 p { font-size: 0.8rem; }
  #submBtn.btn-submit-style { font-size: 1.25rem; }
}

/* Wide/tall desktop (square-ish): keep the stacked column centered */
@media only screen and (min-width: 1024px) and (max-aspect-ratio: 4 / 3) {
  .kv-stage { max-width: 620px; margin: 0 auto; }
}

/* Landscape phones: header pinned to the right (fit to height), form/cup on the left. */
@media only screen and (max-width: 1023px) and (orientation: landscape) {
  .kv {
    min-height: 0;
    display: block;
    background: var(--navy-deep) url('assets/bg_circle.svg') no-repeat;
    background-size: 180%;
    background-position-x: -420px;
    background-position-y: 160%;
  }
  .kv-stage { max-width: 100%; }
  .mobile-header {
    display: block;
    width: auto;             /* let max-height drive the size without distortion */
    height: auto;
    margin-bottom: 1rem;
    position: absolute;
    right: 0;
    z-index: 2;
    max-height: 100vh;
  }
  .cup {
    max-width: 32%;
    margin: -9% auto 0.9rem;
    margin-left: 20%;
  }
}