@font-face {
  font-family: "Grota Rounded Black";
  src: url("../fonts/GrotaRounded-Black.woff2") format("woff2"),
       url("../fonts/GrotaRounded-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body.lp-page {
  min-height: 100vh;
  background: #f5e2a8;
  color: #e30009;
  font-family: "Grota Rounded Black", system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.lp-page input,
body.lp-page textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Local mock header — preview only */
.lp-mock-header {
  background: #e5002b;
  color: #fff;
  position: relative;
  z-index: 50;
}

.lp-mock-header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  gap: 1rem;
}

.lp-mock-header .navbar-brand {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.25rem;
}

.lp-mock-header .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-mock-header .navbar-nav a {
  color: #fff;
  text-decoration: none;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
}

.lp-mock-header .navbar-nav .active a {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .lp-mock-header .navbar-nav {
    display: none;
  }
}

/* Stage */
.lp-stage {
  position: relative;
  min-height: calc(100vh - 70px);
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lp-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.lp-bg-base {
  position: absolute;
  inset: 0;
  background:
    url("../img/pozadina.jpg") center / cover no-repeat,
    radial-gradient(ellipse at center, #fff8e0 0%, #f5e2a8 55%, #efd07a 100%);
}

.lp-float {
  position: absolute;
  display: block;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* Positions from PSD artboard 1903×1080 */
.lp-cookie--tl {
  left: 14.3%;
  top: 5.7%;
  width: min(10.4vw, 150px);
  animation: lp-float-a 7s ease-in-out infinite alternate,
             lp-spin-cw 48s linear infinite;
}

.lp-cookie--ml {
  left: -7.6%;
  top: 20.7%;
  width: min(22vw, 320px);
  animation: lp-float-b 9s ease-in-out infinite alternate,
             lp-spin-ccw 56s linear infinite;
}

.lp-cookie--tr {
  left: 83.9%;
  top: 4.4%;
  width: min(21.8vw, 320px);
  animation: lp-float-c 8s ease-in-out infinite alternate,
             lp-spin-cw 52s linear infinite;
}

.lp-cookie--br {
  left: 79.7%;
  top: 50%;
  width: min(34.8vw, 520px);
  animation: lp-float-a 10s ease-in-out infinite alternate,
             lp-spin-ccw 60s linear infinite;
}

.lp-cookie--bc {
  left: 65.7%;
  top: 86.2%;
  width: min(10.4vw, 150px);
  animation: lp-float-b 6.5s ease-in-out infinite alternate,
             lp-spin-cw 44s linear infinite;
}

.lp-pack {
  left: -4.7%;
  top: 64.6%;
  width: min(29.4vw, 460px);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.22));
  animation: lp-float-pack 8.5s ease-in-out infinite alternate;
}

@keyframes lp-spin-cw {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes lp-spin-ccw {
  from { rotate: 0deg; }
  to { rotate: -360deg; }
}

@keyframes lp-float-a {
  from { translate: 0 0; }
  to { translate: 10px -14px; }
}

@keyframes lp-float-b {
  from { translate: 0 0; }
  to { translate: -12px 10px; }
}

@keyframes lp-float-c {
  from { translate: 0 0; }
  to { translate: 8px 12px; }
}

@keyframes lp-float-pack {
  from { translate: 0 0; }
  to { translate: 14px -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-float {
    animation: none !important;
  }
}

/* Content — vertically centered (desktop + mobile) */
.lp-content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2.2vh, 1.75rem);
  width: min(94vw, 980px);
  margin: 0 auto;
  padding: clamp(1rem, 4vh, 2.5rem) 1rem clamp(3rem, 10vh, 6rem);
  text-align: center;
  min-height: calc(100vh - 70px);
}

/* Title — Photoshop: line1 61pt, BANANICA EKIPE 78.39pt, tracking -25, liga on */
.lp-title {
  margin: 0;
  font-family: "Grota Rounded Black", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.15rem, 3.2vw, 61px);
  line-height: 0.98;
  letter-spacing: -0.025em; /* PS tracking -25 */
  text-transform: uppercase;
  color: #e30009;
  text-wrap: balance;
  max-width: min(94vw, 22ch);
  font-feature-settings: "liga" 1;
  font-variant-ligatures: common-ligatures;
}

.lp-title .lp-title-line {
  display: block;
}

.lp-title .lp-title-line:last-child {
  /* 78.39 / 61 ≈ 1.285 */
  font-size: 1.285em;
  letter-spacing: -0.025em;
  font-feature-settings: "liga" 1;
  font-variant-ligatures: common-ligatures;
}

.lp-video-wrap {
  position: relative;
  width: min(100%, 760px);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(120, 60, 0, 0.22),
    0 2px 0 rgba(255, 255, 255, 0.35) inset;
  background: #1a1208;
  cursor: pointer;
  flex-shrink: 0;
}

.lp-video-wrap:fullscreen,
.lp-video-wrap:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  background: #000;
}

.lp-video-wrap:fullscreen .lp-video,
.lp-video-wrap:-webkit-full-screen .lp-video {
  object-fit: contain;
}

.lp-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1a1208;
}

.lp-video-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-ctrl-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease;
  padding: 0;
}

.lp-ctrl-btn:hover {
  background: rgba(227, 0, 9, 0.85);
  transform: scale(1.05);
}

.lp-ctrl-btn.is-hidden,
.lp-replay-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.lp-sound-btn .lp-icon-sound {
  display: none;
}

.lp-sound-btn .lp-icon-muted {
  display: block;
}

.lp-video-wrap.is-unmuted .lp-sound-btn .lp-icon-sound {
  display: block;
}

.lp-video-wrap.is-unmuted .lp-sound-btn .lp-icon-muted {
  display: none;
}

.lp-replay-btn {
  position: absolute;
  inset: 0;
  z-index: 5;
  margin: auto;
  width: 96px;
  height: 96px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(227, 0, 9, 0.92);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}

.lp-replay-btn:hover {
  transform: scale(1.06);
  background: #e30009;
}

.lp-replay-btn svg {
  width: 64px;
  height: 64px;
}

.lp-video-wrap.is-ended::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Mobile */
@media (max-width: 767px) {
  .lp-stage {
    min-height: calc(100dvh - 56px);
    min-height: calc(100vh - 56px);
  }

  .lp-content {
    min-height: calc(100dvh - 56px) !important;
    min-height: calc(100vh - 56px) !important;
    gap: 1.25rem;
    padding: 10vh 1rem 18vh;
    justify-content: center !important;
  }

  .lp-cookie--tl,
  .lp-cookie--tr,
  .lp-cookie--bc {
    display: none;
  }

  .lp-cookie--ml {
    left: -18%;
    top: 12%;
    width: 42vw;
  }

  .lp-cookie--br {
    left: 58%;
    top: 62%;
    width: 55vw;
  }

  .lp-pack {
    left: -12%;
    top: 72%;
    width: 52vw;
  }

  .lp-title {
    font-size: clamp(2.2rem, 8.5vw, 2.9rem);
    max-width: 14ch;
    line-height: 0.96;
  }

  .lp-video-wrap {
    border-radius: 14px;
    width: min(100%, 100%);
  }

  .lp-replay-btn {
    width: 84px;
    height: 84px;
  }

  .lp-replay-btn svg {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 420px) {
  .lp-cookie--ml {
    opacity: 0.85;
  }

  .lp-title {
    font-size: clamp(2.1rem, 9.2vw, 2.55rem);
  }
}

/* Market flags — on the landing page, aligned to header width, ~25px below header */
.lp-flags-rail {
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 0 1.25rem;
  pointer-events: none;
}

.lp-flags {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: #e5002b;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.lp-flag {
  appearance: none;
  border: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  filter: brightness(0.8);
  transition: filter 0.18s ease;
}

.lp-flag-mark {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.lp-flag-mark svg,
.lp-flag-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-flag.is-active {
  filter: none;
}

@media (max-width: 767px) {
  .lp-flags-rail {
    top: 25px;
    padding: 0 1rem;
  }

  .lp-flags {
    gap: 6px;
    padding: 5px 6px;
  }

  .lp-flag,
  .lp-flag-mark {
    width: 31px;
    height: 31px;
  }
}

/* WP: picture wrappers must not break absolute float layout */
.lp-bg > picture {
  display: contents;
}

/* WP theme integration — force full viewport so vertical center works */
#full-width-page-wrapper:has(.lp-stage),
body.page-template-srecna-poruka #full-width-page-wrapper,
body.page-template-page-templates-srecna-poruka-php #full-width-page-wrapper,
body.page-template-page-templatesrecna-poruka-php #full-width-page-wrapper {
  background: transparent !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  min-height: calc(100dvh - 100px) !important;
  min-height: calc(100vh - 100px) !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#full-width-page-wrapper:has(.lp-stage) .lp-stage,
body.page-template-srecna-poruka .lp-stage,
body.page-template-page-templates-srecna-poruka-php .lp-stage,
body.page-template-page-templatesrecna-poruka-php .lp-stage {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  min-height: calc(100dvh - 100px) !important;
  min-height: calc(100vh - 100px) !important;
}

#full-width-page-wrapper:has(.lp-stage) .lp-content,
body.page-template-srecna-poruka .lp-content,
body.page-template-page-templates-srecna-poruka-php .lp-content,
body.page-template-page-templatesrecna-poruka-php .lp-content {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center !important;
  box-sizing: border-box;
  width: min(94vw, 980px);
  min-height: calc(100dvh - 100px) !important;
  min-height: calc(100vh - 100px) !important;
  padding-top: clamp(1.5rem, 5vh, 3rem) !important;
  padding-bottom: clamp(4rem, 12vh, 7rem) !important;
}

@media (max-width: 767px) {
  #full-width-page-wrapper:has(.lp-stage),
  body.page-template-srecna-poruka #full-width-page-wrapper,
  body.page-template-page-templates-srecna-poruka-php #full-width-page-wrapper,
  body.page-template-page-templatesrecna-poruka-php #full-width-page-wrapper {
    min-height: calc(100dvh - 70px) !important;
    min-height: calc(100vh - 70px) !important;
  }

  #full-width-page-wrapper:has(.lp-stage) .lp-stage,
  body.page-template-srecna-poruka .lp-stage,
  body.page-template-page-templates-srecna-poruka-php .lp-stage,
  body.page-template-page-templatesrecna-poruka-php .lp-stage {
    min-height: calc(100dvh - 70px) !important;
    min-height: calc(100vh - 70px) !important;
  }

  #full-width-page-wrapper:has(.lp-stage) .lp-content,
  body.page-template-srecna-poruka .lp-content,
  body.page-template-page-templates-srecna-poruka-php .lp-content,
  body.page-template-page-templatesrecna-poruka-php .lp-content {
    min-height: calc(100dvh - 70px) !important;
    min-height: calc(100vh - 70px) !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    padding-top: 10vh !important;
    padding-bottom: 18vh !important;
  }

  #full-width-page-wrapper:has(.lp-stage) .lp-title,
  body.page-template-srecna-poruka .lp-title,
  body.page-template-page-templates-srecna-poruka-php .lp-title,
  body.page-template-page-templatesrecna-poruka-php .lp-title {
    font-size: clamp(2.2rem, 8.5vw, 2.9rem) !important;
  }
}

/* Final phase. Phone: the activation. Desktop: the teaser video, unless this is a preview before the start date. */
.lp-desktop-hint {
  display: none;
  margin: 1rem 0 0;
  text-align: center;
  font-family: "Grota Rounded Black", system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  color: #e30009 !important;
}
@media (max-width: 767px) {
  html:has(body.kolacic-phase-3) {
    margin-top: 0 !important;
  }
  body.kolacic-phase-3 {
    background: #e41416;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body.kolacic-phase-3 #wpadminbar,
  body.kolacic-phase-3 #wrapper-navbar,
  body.kolacic-phase-3 #wrapper-footer,
  body.kolacic-phase-3 header:not(.kc-head),
  body.kolacic-phase-3 footer,
  body.kolacic-phase-3 .lp-bg,
  body.kolacic-phase-3 .lp-flags-rail,
  body.kolacic-phase-3 .lp-phase1-panel {
    display: none !important;
  }
  body.kolacic-phase-3 #page,
  body.kolacic-phase-3 .site,
  body.kolacic-phase-3 .wrapper,
  body.kolacic-phase-3 #full-width-page-wrapper,
  body.kolacic-phase-3 .lp-stage,
  body.kolacic-phase-3 .lp-phase3-panel {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #e5002b;
  }
}
@media (min-width: 768px) {
  body.kolacic-phase-3:not(.kolacic-preview) .lp-phase3-panel { display: none !important; }
  body.kolacic-phase-3:not(.kolacic-preview) .lp-desktop-hint { display: block; }
  html:has(body.kolacic-phase-3.kolacic-preview) {
    margin-top: 0 !important;
  }
  body.kolacic-phase-3.kolacic-preview {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: #e5002b;
  }
  body.kolacic-phase-3.kolacic-preview #wpadminbar,
  body.kolacic-phase-3.kolacic-preview .lp-phase1-panel,
  body.kolacic-phase-3.kolacic-preview #wrapper-navbar,
  body.kolacic-phase-3.kolacic-preview #wrapper-footer,
  body.kolacic-phase-3.kolacic-preview header:not(.kc-head),
  body.kolacic-phase-3.kolacic-preview footer,
  body.kolacic-phase-3.kolacic-preview .lp-bg,
  body.kolacic-phase-3.kolacic-preview .lp-flags-rail {
    display: none !important;
  }
  body.kolacic-phase-3.kolacic-preview #page,
  body.kolacic-phase-3.kolacic-preview .site,
  body.kolacic-phase-3.kolacic-preview .wrapper,
  body.kolacic-phase-3.kolacic-preview #full-width-page-wrapper,
  body.kolacic-phase-3.kolacic-preview .lp-stage,
  body.kolacic-phase-3.kolacic-preview .lp-phase3-panel {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #e5002b;
  }
}
.kolacic-preview-bar {
  margin: 0;
  padding: 0.55rem 1rem;
  background: #fff0c5;
  color: #e5002b;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}