:root {
  --navy:         #0032A5;
  --navy-rgb:     0, 50, 165;
  --yellow:       #F6E958;
  --yellow-rgb:   246, 233, 88;
  --ticker-blue:  #195cb9;
  --ticker-bottle:#001689;
  --white:        #ffffff;
  --gray-bg:      #f4f4f4;

  --f-display: 'area-extended', Arial Narrow, sans-serif;
  --f-body:    'area-extended', Arial, sans-serif;
  --nav-h:     68px;
}

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

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--f-body);
  margin: 0; padding: 0;
  background: var(--navy);
  color: var(--white);
  line-height: 1.4;
  overflow-x: clip;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.header-sticky { position: fixed; top: 1.5rem; z-index: 1000; transition: 0.075s ease-in-out; width: 100%; }

.header-sticky.scrolled { top: 0 !important; }

.navbar-custom {
  background: color-mix(in srgb, var(--navy) 80%, transparent);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0;
  transition: background .3s;
}

.navbar {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 5px 24px;
  gap: 1rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar-brand img,
.logo-img {
  max-width: 120px;
  display: block;
}

.pc-menu { display: flex; gap: 0.75rem; align-items: center; list-style: none; margin: 0; padding: 0; }

.pc-menu .nav-item { display: flex; }

.pc-menu .nav-link {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white) !important;
  text-decoration: none;
  min-width: 140px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: background .2s, color .2s;
  white-space: nowrap;
  padding: 0 1rem;
}

.pc-menu .nav-link:hover,
.pc-menu .nav-link.active {
  background: rgba(255,255,255,.05);
  color: var(--yellow) !important;
}

.btn-nav-cta {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--yellow);
  color: var(--navy) !important;
  text-decoration: none;
  min-width: 150px;
  height: 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  margin-left: 0;
  white-space: nowrap;
  transition: background .2s;
  padding-left: 7px;
  padding-right: 7px;
}

.btn-nav-cta:hover { background: #fff; color: var(--navy) !important; }

.ticker-wrap {
  overflow: hidden;
  position: relative;
  z-index: 2;
  height: 68px;
  display: flex;
  align-items: center;
}
.ticker-wrap--yellow { background: var(--yellow); z-index: 5; transform: rotate(-3deg); }
.ticker-wrap--blue   { background: var(--ticker-blue);
  transform: rotate(6deg);
  z-index: 4;
}

.ticker-inner {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: ticker-scroll 18s linear infinite;
}
.ticker-wrap--blue .ticker-inner { animation-duration: 30s; animation-direction: reverse; }

@keyframes ticker-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.ticker-item {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.3vw, 3rem);  /* 3rem = 48px at 1rem=16px */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--navy);
  padding: 0 .75rem;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
}

.ticker-sep {
    display: inline-block;
    width: 87px;
    height: 26px;
    background: var(--ticker-bottle);
    -webkit-mask: url("../images/ticker-separator-_vfeDbL.svg") center/contain no-repeat;
    mask: url("../images/ticker-separator-_vfeDbL.svg") center/contain no-repeat;
}

.ticker-skew {
  margin: 0 -4px;
}

.hero-bg {
  position: relative;
  z-index: 5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(-70px);
}

.hero-bg-inner {
  position: relative;
  background: var(--navy);
  min-height: min(calc(75vh - var(--nav-h)), 900px);
  overflow: hidden;
}

/* Background clouds image */
.hero-bg-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("../images/hero-bg-cropped-7IBY3pZ.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: .95;
  pointer-events: none;
  display: inline-block;
  z-index: 0;
  transform: translateX(-45%);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  height: 100%;
  width: 100%;
}

@media (min-width: 769px) {
  .lang-lv .hero-headline {
    font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  }
}

.hero-headline {
    font-family: var(--f-display);
    font-size: clamp(3.5rem, 6.5vw, 5.5rem);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--yellow);
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0;
    text-align: right;
}

.hero-img {
    display: flex;
    justify-content: center;
}

.hero-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-bottle {
    width: 100%;
    max-width: 350px;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,.35));
    pointer-events: none;
    scale: 1.55;
    transform: translateY(-1.75rem);
}

.prizai-section {
  background: var(--navy);
  color: var(--white);
  position: relative;
  z-index: 3;
  padding: 3rem 0 1rem;
  transform: translateY(-75px);
}

.prizai-wrapper {
    border: 2px solid var(--yellow);
    transform: translateY(-75px);
    z-index: 1;
    position: relative;
    padding: 2rem 2rem 0;
}

.prizai-wrapper .container {
  padding: 0;
}

.prizai-top-banner {
  background: var(--yellow);
  padding: .85rem;
  margin-bottom: 2.5rem;
}
.prizai-top-banner p {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
  text-align: center;
  margin: 0;
  letter-spacing: .02em;
  line-height: 1.25;
}

.prizai-top-banner p > span {
    font-size: 1.7em;
}

.prizai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.prizai-text-col .prizai-desc {
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.prizai-text-col .prizai-desc > span {
  color: var(--yellow);
}

.prizai-text-col .prizai-desc > span.w-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
}

.prizai-text-col .prizai-desc > span.w-icon .icon {
    width: 1.25em;
    height: 1.1em;
    flex-shrink: 0;
    background-color: currentColor;
    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 30'%3E%3Cpath d='M14.7824 24.1728L14.8457 22.6462C14.5479 22.3398 14.3207 21.9915 14.3587 21.5424L14.5424 19.3757C13.4097 18.8078 14.1726 17.458 14.0967 16.6306C14.0334 15.9981 13.12 15.8606 12.6623 15.8045C12.0696 15.732 11.4179 16.0256 11.023 16.5423C10.9407 16.895 11.4983 17.6936 11.2619 18.0218C11.1668 18.1539 10.9048 18.3456 10.745 18.4717C10.9899 20.582 9.8419 19.6802 10.1816 20.7176C10.3403 21.2016 10.1169 21.5851 9.72069 21.8313C9.78183 22.8462 10.6175 24.9916 9.66008 25.7643C9.33151 26.0295 8.92385 26.0622 8.43657 26.0532L8.50152 27.4235C8.52055 27.8271 8.37569 28.2243 8.04604 28.4443C7.7142 28.666 7.27448 28.6227 6.8459 28.4876L6.78366 29.2023C6.73665 29.744 6.21702 30.0401 5.76208 29.9949C5.30659 29.9497 4.85273 29.5433 4.87339 28.985L4.96959 26.4087C4.06514 25.6333 4.49345 25.6109 4.3361 24.4686C3.85534 24.4545 3.42594 24.4177 3.12454 24.1339C2.85984 23.8847 2.70249 23.3903 2.77043 22.9878L2.99872 21.635C2.24292 20.4548 3.00252 19.3234 2.95741 18.088C2.90332 17.7519 2.34864 17.4302 2.57937 16.88L0 16.8433L3.15063 4.55615C3.84175 1.86139 6.04173 -0.0590408 8.90021 0.0166761C9.35081 0.0286601 9.67856 0.498759 9.67204 0.873803C9.66389 1.35371 9.27634 1.73148 8.7771 1.72358C6.76219 1.69144 5.26419 3.02275 4.77609 4.91976L2.15704 15.0991C2.45083 15.1459 2.69732 15.1492 2.94273 15.114C3.32049 13.3263 4.77066 12.0677 6.48363 11.8901C8.31156 11.7005 9.99354 12.7162 10.7088 14.4944C11.8957 13.795 13.2972 13.7882 14.3862 14.5671C15.0648 12.7851 16.7275 11.731 18.5418 11.8819C20.3276 12.0303 21.8569 13.3178 22.2004 15.2271L23.7419 15.2429L26.6759 3.99509C27.6518 0.253905 32.9962 -1.03274 33 0.875165C33.0008 1.33464 32.6491 1.72412 32.114 1.71976C30.2554 1.70424 28.6479 2.88357 28.1744 4.71358L25.0377 16.834L22.8149 16.8743L22.8907 17.8867C22.9143 18.2024 22.67 18.429 22.314 18.5137L22.277 19.2254C22.2469 19.8063 21.7965 20.1729 21.2166 20.061L21.4245 22.9627C21.4443 23.2384 21.1902 23.6224 21.003 23.7559C20.7565 23.9318 20.27 23.9345 19.921 23.8114L19.9178 24.9047C19.9159 25.5712 19.4599 26.0072 18.7478 25.9503C18.7761 26.5432 18.4184 26.9382 17.7939 26.9172C17.7667 27.0207 17.7363 27.335 17.7602 27.4627C17.8863 28.1357 17.4286 28.6963 16.8348 28.7219C16.126 28.7524 15.76 28.2 15.7559 27.5194L15.7428 25.4197C15.1721 25.2541 14.7552 24.8208 14.7821 24.1726L14.7824 24.1728Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

.img-small-bottle--left {
    position: absolute;
    max-width: 225px;
    bottom: -35px;
    left: -50px;
}

.prizai-images {
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.prizai-images .bottles img {
  position: absolute;
  border-radius: 8px;
  object-fit: contain;
}

/* T-shirt */
.prizai-images .img-tshirt {
  max-width: 66%;
}

/* Bottles cluster */
.prizai-images .img-bottle-a {
  z-index: 3;
}
.prizai-images .img-bottle-b {
  z-index: 3;
}
/* Totebag */
.prizai-images .img-totebag {
  z-index: 1;
}

.img-socks {
    position:absolute;
    width: 18%;
    bottom: 100px;
    left: 150px;
    z-index: 2;
    object-fit: contain;
    transform: rotate(15deg);
}

.img-towel {
    max-width: 240px;
    width: 100%;
    transform: translate(-10px, 10px) rotate(-30deg);
}
.survey-section {
  background: var(--navy);
  color: var(--white);
  padding: 0 0 4rem;
  position: relative;
  overflow: hidden;
  transform: translateY(-75px);
}

/* Full-width yellow strip at the top of this section */
.survey-top-strip {
  background: var(--yellow);
  padding: 1rem 0;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
.survey-top-strip h2 {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5.7vw, 5.125rem);  /* Figma: 82px */
  font-weight: 900;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.0;
  margin: 0;
  letter-spacing: -.01em;
}

.towel-wrapper {text-align: right; padding-top: 35px;}

@media (min-width: 769px) and (max-width: 1024px) {
  .header-sticky {
    top: 1rem;
  }
  .navbar-brand img, .logo-img {
      max-width: 105px;
  }

  .pc-menu .nav-link {
      font-size: 0.95rem;
      min-width: 120px;
      padding: 0 0.75rem;
  }
  .hero-bg-inner {
      min-height: calc(50vh - var(--nav-h));
  }

  .hero-bg-inner::before {
    transform: translateX(-22%);
  }

  .prizai-top-banner p {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  }

  .lang-ee .prizai-top-banner p {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  }

  .hero-bottle {
    max-width: 290px;
  }

  .towel-wrapper {
    position: relative;
  }

  .img-socks {
    left: 30%;
    bottom: unset;
    width: 100px;
    top: -18%;
  }

  .img-towel {
    max-width: 200px;
    transform: translate(-40px, -5px) rotate(-30deg)
  }

  .img-small-bottle--left {
    max-width: 175px;
  }

  .prizai-images .img-tshirt {
    max-width: 80%;
  }

  .img-bottle-c {
    display: none;
  }

  .img-bottle-a {
    right: 14% !important;
  }

  .prizai-images .img-bottle-b {
    right: 0 !important;
  }

  .prizai-top-banner {
    padding: .85rem;
  }
}

@media (min-width: 769px) {
  .mobile {
    display: none;
  }

  .non-mobile { display: block; }
}

@media (max-width: 769px) {
  .mobile {
    display: block;
  }
  .non-mobile { display: none; }

  .prizai-grid {
    gap: 1.5rem;
  }

  .prizai-wrapper {
    padding: 1rem 1rem 0;
  }

  .prizai-images {
    align-items: center;
  }

  .prizai-images .img-totebag {
    width: 75% !important;
    bottom: -28px !important;
    right: -45px !important;
  }

  .towel-wrapper {
    position: absolute;
    transform: rotate(30deg);
  }

  .img-socks {
    left: 0;
    bottom: unset;
    width: 100px;
    top: -18%;
  }

  .img-towel {
    max-width: 130px;
    transform: translate(10px, 24px);
  }

  .prizai-images .img-tshirt {
    max-width: 60%;
  }

  .img-small-bottle--left {
    max-width: 124px;
    bottom: -24px;
    left: -24px;
  }

  .prizai-text-col .prizai-desc {
    max-width: 80%;
  }

  .prizai-text-col p.prizai-desc:last-of-type {
    margin-bottom: 0.5rem;
  }

  .img-bottle-c {
    top: -60% !important;
    right: 0 !important;
    transform: rotate(300deg) !important;
  }

  .prizai-images .img-bottle-a {
    right: 10% !important;
    width: 15% !important;
  }

  .prizai-images .img-bottle-b {
    width: 18% !important;
    z-index: 2 !important;
    right: 0 !important;
    transform: rotate(2deg);
  }

  .prizai-top-banner {
    margin-bottom: 1.5rem;
  }
}

/* Tennis ball floating decoration */
.survey-tennis {
    position: absolute;
    right: 0;
    top: 0;
    height: 85%;
    width: auto;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.survey-inner {
  position: relative;
  z-index: 1;
  max-width: 50%;
}

.survey-tennis-mobile {
  display: none;
}

@media (max-width: 1024px) {
  .survey-tennis {
    height: 87%;
  }
}

@media (max-width: 991px) {
  .survey-tennis {
    display: none;
  }

  .survey-tennis-mobile {
    display: inline;
    width: 100%;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-3deg) translateY(-1rem);
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  }
}

@media (max-width: 768px) {
  .survey-inner { max-width: 100%; }
}

.survey-title {
    font-family: var(--f-display);
    font-size: clamp(2.5rem, 5.5vw, 2.821rem);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: 1.5rem;
    text-align: left;
}

.survey-header { margin-bottom: 0; }

.section-title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 2rem;
  text-align: left;
}

/* Form fields */
.registration-form { max-width: none; }

.form-label {
  font-family: var(--f-display);
  font-size: clamp(.9rem, 1.4vw, 1.25rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--yellow);
  margin-bottom: .4rem;
  display: block;
}

.form-label.required::after { content: ' *'; color: #ff9999; }

.form-control {
  background: var(--white);
  border: 2px solid transparent;
  border-radius: 0;
  padding: .85rem 1rem;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
  width: 100%;
  outline: none;
  transition: box-shadow .2s;
}
.form-control::placeholder {
  color: rgba(var(--navy-rgb), .4);
  text-transform: uppercase;
  font-size: .9rem;
}
.form-control:focus {
  box-shadow: 0 0 0 3px var(--yellow);
}

textarea.form-control { resize: vertical; min-height: 90px; }

.registration-form .form-label { display: none; }

.form-group.form-check {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
    row-gap: 0.15rem;
    align-items: start;
}

.form-group.form-check .form-check-input {
    grid-column: 1;
    grid-row: 1;
}

.form-group.form-check .form-check-label {
    grid-column: 2;
    grid-row: 1;
}

.form-group.form-check .invalid-feedback {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    margin-left: 0;
}

.form-group--answer .form-label {
  display: block;
  color: var(--navy);
  font-size: clamp(1.4rem, 2.8vw, 2.25rem); /* Figma: ~36px */
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: .5rem;
}
.form-group--answer .form-control {
  background: transparent;
  border: none;
  padding: .4rem 0;
  flex: 1;
}
.form-group--answer .form-control:focus { box-shadow: none; }
.form-group--answer textarea.form-control {
  resize: none;
  min-height: 175px;
  padding: 3.5rem 1rem .85rem;
  background: #fff;
  border: 2px solid transparent;
}
.form-group--answer textarea.form-control::placeholder {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
  opacity: 1;
}
.form-group--answer textarea.form-control:focus { box-shadow: none; border-color: var(--yellow); }
.form-group--answer textarea.form-control.is-invalid { border-color: #ff4444; }
.form-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 576px) {
  .form-inputs-grid { gap: 0.75rem;     margin-top: 0.75rem;
    margin-bottom: 0.75rem; }
}

/* 2-col row */
.row.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 0; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
@media (max-width: 576px) { .col-md-6 { flex: 0 0 100%; max-width: 100%; } }

/* Checkbox */
.form-check { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 0; }
.form-check-input {
  width: 24px; height: 24px;
  flex-shrink: 0;
  margin-top: .1rem;
  accent-color: var(--yellow);
  border-radius: 0 !important;
  cursor: pointer;
}
.form-check-label {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,.85);
  cursor: pointer;
}
.rules-inline-link {
  text-transform: uppercase;
  font-weight: 900;
}

/* Submit button */
.registration-actions {
  margin-top: 1.5rem;
  display: flex;
  width: 100%;
}

.btn-submit {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--yellow);
  color: var(--navy);
  border: none;
  padding: 1.1rem 2.5rem;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s, transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
}
.btn-submit:hover { background: #e8d73e; }
.btn-submit:disabled { background: #ccc; color: #888; cursor: not-allowed; transform: none; }
.btn-submit .icon { width: 1.1rem; height: 1.1rem; }

.form-control.is-invalid { border-color: #ff4444; }

/* Validation feedback */
.invalid-feedback { color: #ff9999; font-size: .8rem; margin-top: .5rem; font-family: var(--f-body); }

/* ═══════════════════════════════════════════════════════════════════════
   GALERIJA SECTION (gallery)
   ═══════════════════════════════════════════════════════════════════════ */
.gallery-section {
    background: transparent;
    position: relative;
    overflow: hidden;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    transform: translateY(-75px);
    padding-bottom: 3rem;
}

.gallery-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gallery-bg-img img {
    width: 62%;
    height: 100%;
    object-fit: cover;
    margin-top: -5rem;
    margin-left: -1em;
    transform: rotate(2deg);
    position: relative;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.6) 8%,
        black 18%,
        black 82%,
        rgba(0,0,0,0.6) 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.6) 8%,
        black 18%,
        black 82%,
        rgba(0,0,0,0.6) 92%,
        transparent 100%
    );
}
.gallery-content {
    position: relative;
    z-index: 2;
    padding: 0 0 3rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.gallery-title {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1.5rem;
  grid-area: 1 / 5 / 2 / 13;
}

.gallery-grid-wrapper {
    padding: 1rem;
    border: 1px solid var(--yellow);
    grid-area: 2 / 5 / 3 / 13;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    max-height: 632px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    align-items: start;
    justify-content: center;
}
/* 3 columns only above 1024px; the squares get too cramped below that
   (the 400px single-column override further down still applies). */
@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.gallery-grid::-webkit-scrollbar { width: 4px; }
.gallery-grid::-webkit-scrollbar-track { background: transparent; }
.gallery-grid::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 2px; }

.gallery-placeholder {
  aspect-ratio: 1;
  background: rgba(var(--yellow-rgb), .08);
  border: 1px solid rgba(255,255,255,.1);
}

/* ── Gallery submission card (same anatomy as winner card) ── */
.gallery-card {
    background: var(--white);
    display: flex;
    flex-direction: column;
    font-family: var(--f-display);
    aspect-ratio: 1;
    height: 100%;
    width: 100%;
}

.gallery-card-name {
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--navy);
  line-height: 1.2;
  flex-shrink: 0;
  padding: 10px;
}
.gallery-card-text-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px 10px;
    overflow: hidden;
}

.gallery-card-text {
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--navy);
    text-align: center;
    line-height: 1.2;
    background: var(--yellow);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Long answers: hard-wrap unbroken tokens, clamp to 7 lines with an ellipsis.
   margin:auto centers like the flex alignment above but anchors to the top if
   the clamped block still exceeds a small card — flex centering alone clips
   both ends (Safari has no `safe`). */
.gallery-card-text > span {
    margin: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    overflow: hidden;
    line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════════
   WINNERS SECTION  —  fan-deck carousel
   ═══════════════════════════════════════════════════════════════════════ */

.homepage-winners-section {
  background: var(--navy);
  padding: 4rem 0 3rem;
  position: relative;
  overflow: hidden;
  transform: translateY(-75px);
}

/* Bottle decoration — top-right */
.winners-bottle {
  position: absolute;
  right: 28px;
  top: -10%;
  width: min(18%, 320px);
  pointer-events: none;
  z-index: 0;
  transform: rotate(311deg);
}

.winners-header {
  position: relative;
  z-index: 1;
  margin-bottom: 2.5rem;
}

.winners-title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 60%;
}

/* ── Fan-deck carousel ── */

.winners-content {
  position: relative;
  z-index: 1;
  transition: opacity .2s;
}

/* Stage: full-width positioned container; section overflow:hidden clips edge cards */
.fan-stage {
  position: relative;
  height: 390px;          /* active card = 330 px; 30 px breathing room each side */
  margin: 0 -24px;        /* bleed beyond .container padding */
  width: calc(100% + 48px);
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.fan-stage:active { cursor: grabbing; }

/* ── Individual fan card ── */

.fan-card {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--navy);
  font-family: var(--f-display);

  /*
   * Width and height are FIXED across all slots — text column never changes,
   * so there is zero text reflow. Scale alone drives the visual size difference.
   * JS overrides transition:none for one frame on wrap-around teleports.
   */
  transition:
    left      .35s cubic-bezier(.25,.46,.45,.94),
    transform .35s cubic-bezier(.25,.46,.45,.94),
    opacity   .3s  ease;

  opacity: 0;
  pointer-events: none;
  z-index: 0;
  width: 360px;
  height: 330px;
  left: 50%;
}

/* Skeleton placeholder cards — always inert regardless of slot */
.fan-card.fan-card--skeleton {
  background: rgba(var(--yellow-rgb), .08);
  border: 1px solid rgba(255,255,255,.1);
  pointer-events: none;
  cursor: default;
}

/* Active / centre card — scale(1), same DOM size as base */
.fan-card[data-slot="0"] {
  left: 50%;
  z-index: 5;
  opacity: 1;
  pointer-events: none;
  cursor: default;
  transform: translate(-50%, -50%);
}

/* Adjacent cards (±1) */
.fan-card[data-slot="-1"],
.fan-card[data-slot="1"] {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}
/* Edge cards (±2) — visible at the stage edges */
.fan-card[data-slot="-2"],
.fan-card[data-slot="2"] {
  z-index: 1;
  opacity: 0.85;
  pointer-events: auto;
  cursor: pointer;
}

/* ── Card internals ── */

.fan-card-name {
  font-size: .875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--navy);
  line-height: 1.2;
  flex-shrink: 0;
  padding: 10px;
}

.fan-card-body {
  flex: 1;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.fan-card-text {
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--navy);
  text-align: center;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * All cards: 360×330 px (uniform — no width/height change between slots).
 * Scale drives visual size. Equal gaps G = 20 px:
 *
 *   slot  0   360×330  0°    scale 1.00  → visual half = 180 px
 *   slot ±1   360×330  ±3°   scale 0.82  → visual width 295 px → half ≈ 148 px
 *   slot ±2   360×330  ±6°   scale 0.67  → visual width 241 px → half ≈ 121 px
 *
 *   centre ±1 = 180+20+148 = 348 px
 *   centre ±2 = 348+148+20+121 = 637 px  (edge cards intentionally clip at stage boundary)
 */
.fan-card[data-slot="-1"] { left: calc(50% - 348px); transform: translate(-50%, -50%) rotate(-3deg) scale(0.82); }
.fan-card[data-slot="1"]  { left: calc(50% + 348px); transform: translate(-50%, -50%) rotate(3deg)  scale(0.82); }
.fan-card[data-slot="-2"] { left: calc(50% - 637px); transform: translate(-50%, -50%) rotate(-6deg) scale(0.67); }
.fan-card[data-slot="2"]  { left: calc(50% + 637px); transform: translate(-50%, -50%) rotate(6deg)  scale(0.67); }

/* ── Week tabs (4 × 2 grid) ── */

.week-tabs-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
}

.week-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
    justify-content: center;
    max-width: 360px;
    width: 100%;
}

.week-tab {
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy);
  background: #fff;
  border: 0;
  padding: .28rem .8rem;
  cursor: pointer;
  border-radius: 0;
  transition: background .18s ease-in-out;
  white-space: nowrap;
}
.week-tab:hover {
  background: var(--yellow);
}
.week-tab.active {
  background: var(--yellow);
}

/* ── LV goods-lottery legal list (operator requirement) ── */

.lv-legal {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 2.5rem 1.5rem 0;
}

.lv-legal-inner {
  width: fit-content;
  max-width: 100%;
  text-align: left;
}

.lv-legal-date {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--yellow);
  margin: 0 0 1rem;
}

.lv-legal-title {
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1.15;
  margin: 0 0 1.5rem;
  max-width: 24ch;
}

.lv-legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lv-legal-item {
  margin-bottom: 1.1rem;
}

.lv-legal-name {
  display: block;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1.3;
}

.lv-legal-doc {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--yellow);
}

@media (max-width: 640px) {
  .lv-legal-title { font-size: 1.4rem; }
  .lv-legal-date  { font-size: 1.25rem; }
}

/* ── States ── */

.no-winners {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  text-align: center;
  padding: 3rem;
  letter-spacing: .06em;
}

.no-winners-announcement {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-align: center;
  letter-spacing: .04em;
}

.loading-indicator { text-align: center; padding: 2rem; }
.spinner-border { color: var(--yellow) !important; }

.prize-tier-section { margin-bottom: 2.5rem; }
.prize-tier-title {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1rem;
  letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: url("../images/aitvaras-bottom-aVqB9tF.png") left bottom / contain no-repeat, var(--navy);
  min-height: 38vh;
  position: relative;
  overflow: hidden;
  padding: 3rem 0 2rem;
  display: flex;
  align-items: center;
  color: var(--white);
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.footer-logo {
  height: 230px;
  width: auto;
  margin-bottom: 1rem;
}

.footer-tagline {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 1.5rem;
}

.footer-lottery-reg {
  font-family: var(--f-body);
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  margin: 0 0 .75rem;
}

.footer-bottom-row {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--f-body);
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}

.footer-bottom-row a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
}

.footer-bottom-row a:hover { color: var(--yellow); }

.footer-locale {
  display: flex;
  gap: .5rem;
}

.footer-locale-link {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.footer-locale-link.is-active { color: var(--yellow); }

/* ═══════════════════════════════════════════════════════════════════════
   CTA sections (kept for back-compat but repurposed)
   ═══════════════════════════════════════════════════════════════════════ */
.cta-bg {
  background: var(--navy);
  padding: 0;
}

.cta-bg-img { display: none; } /* removed in new design */

.cta-bottom-content { padding: 3rem 0; text-align: center; }

.cta-bottom-title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1.75rem;
  line-height: 1.1;
}

.btn-cta-bottom {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--yellow);
  color: var(--navy);
  border: none;
  padding: .85rem 2.75rem;
  border-radius: 0;
  text-decoration: none;
  display: inline-block;
  transition: background .2s, transform .15s;
}
.btn-cta-bottom:hover { background: #e8d73e; color: var(--navy); transform: translateY(-2px); }


/* ═══════════════════════════════════════════════════════════════════════
   TOAST & FLASH
   ═══════════════════════════════════════════════════════════════════════ */
.toast-container-left {
  position: fixed;
  left: 2rem; bottom: 8rem;
  z-index: 1050;
  max-width: 350px;
}
.toast-flash { margin-bottom: .5rem; border-radius: 4px; border: none; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.toast-flash .toast-body { padding: 1rem; font-weight: 600; font-family: var(--f-display); text-transform: uppercase; font-size: .9rem; }
.toast-flash.bg-success { background: linear-gradient(135deg, #28a745, #20c997) !important; color: white; }
.toast-flash.bg-danger  { background: linear-gradient(135deg, #dc3545, #fd7e14) !important; color: white; }
.toast-flash.bg-warning { background: var(--yellow) !important; color: var(--navy); }
.toast-flash.bg-info    { background: var(--ticker-blue) !important; color: var(--navy); }

/* ═══════════════════════════════════════════════════════════════════════
   COOKIE BANNER
   ═══════════════════════════════════════════════════════════════════════ */
.cookie-banner {
  position: fixed;
  bottom: 2rem; left: 2rem;
  max-width: 420px;
  background: rgba(var(--navy-rgb), .97);
  border: 2px solid var(--yellow);
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
  transform: translateY(100px);
  opacity: 0;
  visibility: hidden;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  z-index: 1060;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; visibility: visible; }
.cookie-banner-content { display: flex; flex-direction: column; gap: 1rem; }
.cookie-banner-text h4 {
  font-family: var(--f-display);
  font-size: 1rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--yellow); margin: 0 0 .4rem;
}
.cookie-banner-text p { font-size: .82rem; line-height: 1.4; margin: 0; color: rgba(255,255,255,.8); }
.cookie-banner-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Banner buttons — no Bootstrap, same sharp-corner language */
.cookie-banner-btn {
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: none;
  padding: .4rem .9rem;
  cursor: pointer;
  transition: background .2s, color .2s;
  line-height: 1;
  height: 32px;
  display: inline-flex;
  align-items: center;
}
.cookie-banner-btn--accept  { background: var(--yellow); color: var(--navy); }
.cookie-banner-btn--accept:hover { background: #e8d73e; }
.cookie-banner-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.cookie-banner-btn--outline:hover { background: rgba(255,255,255,.08); }
.cookie-banner-btn--ghost   { background: rgba(255,255,255,.08); color: #fff; }
.cookie-banner-btn--ghost:hover { background: rgba(255,255,255,.15); }

/* ═══════════════════════════════════════════════════════════════════════
   COOKIE SETTINGS MODAL — matches rules modal design language
   ═══════════════════════════════════════════════════════════════════════ */
.cookie-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,30,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1rem;
  animation: modalIn .25s ease;
}
.cookie-settings-overlay[hidden] { display: none; }

.cookie-settings-box {
  background: var(--navy);
  border: 2px solid var(--yellow);
  max-width: 550px;
  width: 100%;
  max-height: min(85vh, 800px);
  overflow-y: auto;
  padding: 2.5rem 2rem 2rem;
  position: relative;
  animation: modalBoxIn .25s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--yellow) transparent;
}

.cookie-settings-close {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--yellow);
  color: var(--navy);
  border: none;
  cursor: pointer;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.cookie-settings-close:hover { background: #e8d73e; }

.cookie-settings-title {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 2.5rem 1rem 0;
  line-height: 1.0;
}

.cookie-settings-desc {
  font-size: .875rem;
  color: rgba(255,255,255,.75);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

/* ── Cookie option row ── */
.cookie-option {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.cookie-option:last-of-type { border-bottom: none; }

.cookie-option-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .35rem;
}
.cookie-option-label {
  font-family: var(--f-display);
  font-size: .875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--white);
}
.cookie-option-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  margin: 0;
  padding-left: calc(44px + .85rem);
  line-height: 1.45;
}

/* ── Custom toggle switch ── */
.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.cookie-toggle input {
  opacity: 0;
  width: 0; height: 0;
  position: absolute;
}
.cookie-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.25);
  transition: background .2s, border-color .2s;
}
.cookie-toggle-track::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: rgba(255,255,255,.55);
  transition: transform .2s, background .2s;
}
.cookie-toggle input:checked + .cookie-toggle-track {
  background: var(--yellow);
  border-color: var(--yellow);
}
.cookie-toggle input:checked + .cookie-toggle-track::after {
  transform: translateX(20px);
  background: var(--navy);
}
.cookie-toggle input:disabled + .cookie-toggle-track { opacity: .5; cursor: not-allowed; }
.cookie-toggle input:disabled:checked + .cookie-toggle-track {
  background: rgba(246,233,88,.45);
  border-color: rgba(246,233,88,.45);
}

.cookie-privacy-note {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  margin: 1.25rem 0 0;
  line-height: 1.4;
}
.cookie-privacy-note a { color: var(--yellow); text-decoration: none; }
.cookie-privacy-note a:hover { color: #e8d73e; }

/* ── Modal footer ── */
.cookie-settings-footer {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.12);
  flex-wrap: wrap;
}
.cookie-settings-btn {
  font-family: var(--f-display);
  font-size: .9rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: none;
  padding: .65rem 2rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.cookie-settings-btn--cancel {
  background: transparent;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.2);
}
.cookie-settings-btn--cancel:hover { background: rgba(255,255,255,.06); color: #fff; }
.cookie-settings-btn--save {
  background: var(--yellow);
  color: var(--navy);
}
.cookie-settings-btn--save:hover { background: #e8d73e; }

/* ═══════════════════════════════════════════════════════════════════════
   TAISYKLĖS MODAL
   ═══════════════════════════════════════════════════════════════════════ */
.rules-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 50, 165, .82);   /* navy at 82% */
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* shown/hidden via `hidden` attribute — no transition needed on hidden */
  animation: modalIn .25s ease;
}
.rules-modal-overlay[hidden] { display: none; }

@keyframes modalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rules-modal-box {
  background: var(--navy);
  border: 2px solid var(--yellow);
  max-width: 720px;
  width: 100%;
  max-height: min(85vh, 900px);
  overflow-y: auto;
  padding: 2.5rem 2rem 2rem;
  position: relative;
  animation: modalBoxIn .25s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--yellow) transparent;
}

@keyframes modalBoxIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.rules-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--yellow);
  color: var(--navy);
  border: none;
  cursor: pointer;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.rules-modal-close:hover { background: #e8d73e; }

.rules-modal-title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 2.5rem 1.5rem 0;
  line-height: 1.0;
}

/* rules content inside the modal — light text on navy */
.rules-modal-body .rules-content { color: var(--white); }
.rules-modal-body .rules-content h3 {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 1.25rem 0 .5rem;
}
.rules-modal-body .rules-content p,
.rules-modal-body .rules-content li {
  font-size: .9rem;
  line-height: 1.55;
  color: #fff;
}
.rules-modal-body .rules-content ul { padding-left: 1.25rem; }
.rules-modal-body .rules-content a { color: var(--yellow); }
.rules-modal-body .rules-content strong { color: var(--white); }

/* inline link inside the checkbox label */
.rules-inline-link {
  color: var(--yellow);
  text-decoration: none;
}
.rules-inline-link:hover { color: #e8d73e; }

.rules-modal-footer {
  text-align: center;
  padding-top: 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.15);
}

.rules-modal-understood {
  background: var(--white);
  color: var(--navy);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  padding: .75rem 3.5rem;
  cursor: pointer;
  transition: background .2s;
}

.rules-modal-understood:hover { background: var(--yellow); }

@media (max-width: 600px) {
  .rules-modal-box { padding: 1.5rem 1rem 1rem; }
  .rules-modal-understood { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LEGAL PAGES  (rules + privacy policy)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page title strip ── */
.legal-hero {
  background: var(--navy);
  border-bottom: 4px solid var(--yellow);
  /* Pull the section up behind the sticky navbar (same -70px trick as .hero-bg)
     so the navy background extends behind the floating bar. The extra padding-top
     pushes the visible text back below the navbar. */
  margin-top: -2rem;
  padding: calc(70px + var(--nav-h) + 1.5rem) 0 2.5rem;
}
.legal-hero-title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1.0;
  letter-spacing: -.01em;
  margin: 0;
}

/* ── Content area ── */
.legal-body {
  background: #fff;
  flex: 1;
  padding: 3rem 0 5rem;
}
.legal-col {
  max-width: 720px;
  margin: 0 auto;
}

/* ── Typography inside legal pages ── */
.legal-content {
  color: #1a1a2e;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
}
.legal-content h2 {
  font-family: var(--f-display);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--navy);
  margin: 2.5rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--yellow);
}
.legal-content h3 {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--navy);
  margin: 1.75rem 0 .5rem;
}
.legal-content p {
  margin-bottom: .9rem;
  color: #1a1a2e;
}
.legal-content strong { color: var(--navy); }
.legal-content em { color: #444; }
.legal-content a { color: var(--navy); text-decoration: underline; }
.legal-content a:hover { color: #0032A5cc; }
.legal-content ul, .legal-content ol {
  padding-left: 1.4rem;
  margin-bottom: .9rem;
}
.legal-content li { margin-bottom: .35rem; color: #1a1a2e; }

/* Tables (privacy policy cookie table) */
.legal-content .table-responsive { margin: 1rem 0; border-radius: 4px; overflow: hidden; }
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.legal-content table th {
  background: var(--navy);
  color: var(--yellow);
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .04em;
  padding: .6rem .75rem;
  text-align: left;
  border: 1px solid rgba(0,50,165,.2);
}
.legal-content table td {
  padding: .55rem .75rem;
  border: 1px solid #e0e4f0;
  vertical-align: top;
  color: #1a1a2e;
}
.legal-content table tr:nth-child(even) td { background: #f4f6fc; }

/* Back link */
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color .2s;
}
.legal-back:hover { color: var(--yellow); }
.legal-back svg { width: 14px; height: 14px; }

/* Legacy selector — kept for modal context */
.page-heading { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; }
/* rules-content inside modal already scoped above; standalone page uses legal-content now */
.rules-content { /* intentionally empty — styles handled by .legal-content or modal scope */ }

/* ═══════════════════════════════════════════════════════════════════════
   SUCCESS PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.success-hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: stretch;
  /* Same -70px pull-behind as .hero-bg on the homepage */
  margin-top: -70px;
}
.success-hero-inner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  /* Compensate for the -70px shift so content clears the sticky navbar */
  padding: calc(70px + var(--nav-h) + 1rem) 0 4rem;
}
.success-hero-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 30% 50%, rgba(246,233,88,.07) 0%, transparent 70%);
  pointer-events: none;
}
.success-hero-content {
  position: relative;
  z-index: 1;
  max-width: 650px;
}
.success-check {
  color: var(--yellow);
  margin-bottom: 1.75rem;
}
.success-check svg { width: 64px; height: 64px; display: block; }
.success-heading {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 1.25rem;
}
.success-subtext {
  font-family: var(--f-display);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  line-height: 1.3;
  letter-spacing: .01em;
  margin: 0;
}
.success-bottle {
    position: absolute;
    right: -2%;
    bottom: -20%;
    width: min(35%, 380px);
    opacity: .9;
    pointer-events: none;
    filter: drop-shadow(-20px 20px 40px rgba(0,0,0,.35));
    z-index: 0;
    transform: rotate(338deg);
}
@media (max-width: 640px) {
  /* Adjust top-padding at mobile nav height (--nav-h: 56px at 480px) */
  .success-hero-inner { padding: calc(70px + var(--nav-h) + 1rem) 0 8rem; }
  .success-bottle { width: min(55%, 220px); opacity: .5; }
}

/* Legacy */
.sketch-container { padding: 4rem 0; }
.success-icon svg { color: var(--yellow); }

/* ═══════════════════════════════════════════════════════════════════════
   LOCALE PICKER
   ═══════════════════════════════════════════════════════════════════════ */
.locale-picker {
  position: fixed; inset: 0;
  background: rgba(var(--navy-rgb), .92);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.locale-picker-box {
  background: var(--white);
  color: var(--navy);
  padding: 2.5rem;
  border-radius: 4px;
  max-width: 400px;
  text-align: center;
}
.locale-picker-box h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.4rem; margin-bottom: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN (untouched)
   ═══════════════════════════════════════════════════════════════════════ */
.main-content { margin-top: var(--nav-h); }

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════════════════ */
.icon { width: 1.3rem; height: 1.3rem; }
.btn-close { filter: brightness(0) invert(1); }

/* ── Bootstrap overrides ─────────────────────────────────────────────── */
.progress { border-radius: 2px !important; background: rgba(255,255,255,.2); }
.progress-bar { background-color: var(--yellow) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .footer-tagline {
    max-width: 420px;
  }
}

@media (max-width: 768px) {
  .navbar { padding: 0 12px; gap: .25rem; }
  .navbar-brand {
    margin-right: 0;
  }
  .navbar-brand img, .logo-img { max-width: 90px; }
  .btn-nav-cta {
    min-width: 130px;
    height: 36px;
    font-size: 0.9rem;
  }
  .pc-menu {
    gap: 0.25rem;
  }
  .pc-menu .nav-link { font-size: .6rem; min-width: auto; padding: 0 .3rem; height: 34px; }
  .header-sticky {
    top: .5rem !important;
  }

  .gallery-bg-img img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 20%) 8%, rgb(0 0 0) 10%, rgb(0 0 0 / 75%) 54%, rgb(0 0 0 / 10%) 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 20%) 8%, rgb(0 0 0) 10%, rgb(0 0 0 / 75%) 54%, rgb(0 0 0 / 10%) 92%, transparent 100%);
  }
}

@media (min-width: 1200px) {
  .hero-bg-inner::before {
    transform: translateX(-36%) rotate(6deg);
    background-size: 96%;
  }

  .gallery-section .container {
    min-height: 880px;
  }

  .site-footer {
    min-height: 60vh;
  }

  .footer-tagline {
    max-width: 480px;
  }
}

@media (min-width: 2560px) {
  .hero-bg-inner::before {
    background-size: auto 80%;
    background-position: left bottom;
    transform: none;
    transform: rotate(6deg) translateY(32px);
  }
}

@media (max-width: 768px) {
  :root { --nav-h: 56px; }

  .hero-bg-inner { min-height: calc(85vh - var(--nav-h)); }

  .hero-bg-inner::before {
    background-image: url("../images/aitvaras-8Q6j6R9.png");
    background-size: 170%;
    opacity: 1;
    pointer-events: none;
    transform: unset;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-img {
    display: none;
  }

  .hero-text {
    min-height: 50vh;
  }

  .hero-headline {
    text-align: right;
    font-size: clamp(1.5rem, 8vw, 2.6rem);
    line-height: 1.2;
  }

  .footer-tagline { font-size: clamp(1.2rem, 6.5vw, 2rem); }

  .survey-top-strip h2 { font-size: clamp(2.2rem, 8vw, 3rem); }

  .gallery-title { font-size: clamp(1.8rem, 6.5vw, 2.4rem); line-height: 1.15; }

  .prizai-grid { grid-template-columns: 1fr; }
  .prizai-images { min-height: 240px; }
  .toast-container-left { left: 1rem; bottom: 5rem; max-width: calc(100vw - 2rem); }


  .ticker-wrap { height: 48px; }
  .ticker-item { font-size: 1.5rem; }

  .ticker-sep {
    width: 36px;
    height: 12px;
}

  .winners-title { font-size: clamp(1.5rem, 6vw, 2.4rem); }

  /* ── Fan carousel — mobile ── */
  .fan-stage {
    height: 300px;
  }
  /*
   * Uniform card width on mobile — NO slot-specific width/height overrides.
   * Scale alone drives the visual size difference (same strategy as desktop).
   * This eliminates text reflow when a card becomes the centre.
   *
   * Rotation + scale come from the desktop [data-slot] rules (they still apply).
   * Only `left` is overridden here to fit the narrower mobile stage.
   *
   * Equal-gap (G = 15 px):
   *   slot  0   260×240  0°    scale 1.00  → visual half = 130 px
   *   slot ±1   260×240  ±3°   scale 0.82  → visual width 213 px → half ≈ 107 px
   *   centre ±1 = 130+15+107 = 252 px
   */
  .fan-card {
    width: 260px;
    height: 240px;
  }
  .fan-card[data-slot="-1"] { left: calc(50% - 252px); }
  .fan-card[data-slot="1"]  { left: calc(50% + 252px); }
  /* ±2 hidden on mobile — off-screen buffer */
  .fan-card[data-slot="-2"] { left: calc(50% - 461px); opacity: 0; }
  .fan-card[data-slot="2"]  { left: calc(50% + 461px); opacity: 0; }
}

@media (min-width: 540px) and (max-width: 768px) {
  .hero-bg-inner {
    min-height: calc(100vh + var(--nav-h));
  }
}

@media (max-width: 991px) {
    .site-footer {
        min-height: 344px;
        background: transparent;
        text-align: center;
    }

    .footer-right {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-logo {
    height: 90px;
    }

    .footer-tagline {
      line-height: 1.3;
      text-align: center;
    }

    .footer-bottom-row {
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .form-check-input {
    width: 18px;
    height: 18px;
  }

  .survey-title {
    font-size: clamp(0.85rem, 3.5vw, 1.5rem);
  }

  .form-check-label {
    font-size: .75rem;
  }

  .form-group.form-check .invalid-feedback {
    margin-left: 0.25rem;
  }

  .gallery-title {
    grid-area: 1 / 1 / 2 / 13;
  }

  .gallery-grid-wrapper {
    grid-area: 2 / 1 / 3 / 13;
  }

  /* Narrow 2-col squares: 1rem/900 uppercase fits only a couple of words per
     line and long answers clip — step down so more of the text stays visible. */
  .gallery-card-text {
    font-size: .875rem;
  }

  .gallery-section {
    transform: translateY(-266px);
  }

  .homepage-winners-section {
    transform: translateY(-320px);
  }

  .gallery-bg-img.mobile {
    position: relative;
  }

  .gallery-bg-img.mobile img {
    width: 100%;
    margin-top: -4rem;
  }

  .week-tabs-row {
    align-items: flex-end;
  }

  .week-tabs {
    grid-template-columns: repeat(2, 1fr);
    max-width: 180px;
  }

  .pc-menu .nav-item:not(:last-child) {
    display: none;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }
  .ticker-wrap { height: 40px; }
  .ticker-item { font-size: 1.25rem; }

  .hero-headline,
  .footer-tagline,
  .survey-top-strip h2,
  .gallery-title,
  .winners-title {
    line-height: 1.4;
  }
}

@media (max-width: 400px) {
  .hero-bg-inner {
    min-height: 100vh;
  }
  .hero-text {
    min-height: 55vh;
    padding-top: calc(var(--nav-h) * 1.55);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 992px) and (max-width: 1500px) {
  .site-footer {
    background-size: 50%;
    display: flex;
    align-items: center;
  }

  .footer-logo {
    height: 180px;
  }

  .footer-tagline {
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════════════ */
.login-page {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: 5rem 0 4rem;
}

.login-box {
  max-width: 480px;
  margin: 0 auto;
  background: rgba(255,255,255,.04);
  border: 2px solid var(--yellow);
  padding: 2.5rem 2rem;
}

.login-title {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 2rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.login-error {
  background: rgba(255,68,68,.12);
  border: 1px solid rgba(255,68,68,.35);
  color: #ff9999;
  padding: .75rem 1rem;
  font-size: .875rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.login-already {
  color: rgba(255,255,255,.8);
  font-size: .9rem;
  margin: 0;
}
.login-already a { color: var(--yellow); text-decoration: none; }
.login-already a:hover { color: #e8d73e; }

.login-remember {
  margin: .75rem 0 1.5rem;
}
.login-check-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  user-select: none;
}
.login-check {
  accent-color: var(--yellow);
  width: 15px; height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Mobile: cookie banner + settings modal */
@media (max-width: 768px) {
  .cookie-banner { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; padding: 1.25rem; }
  .cookie-banner-actions { flex-direction: column; }
  .cookie-banner-btn { width: 100%; justify-content: center; }
  .cookie-settings-footer { flex-direction: column-reverse; }
  .cookie-settings-btn { width: 100%; text-align: center; }
}


/* ovverdide to make the ticker works on ultra wide screen */
.hero-bg,
.prizai-section,
.survey-section,
.gallery-section,
.homepage-winners-section {
    transform: none !important;
    overflow: visible;
    position: relative;
}

.hero-bg {
    z-index: 5;
    margin-bottom: -75px;
}

.prizai-section {
    z-index: 4;
}

.survey-section {
    z-index: 3;
}

.gallery-section {
    z-index: 2;
}

.homepage-winners-section {
    z-index: 1;
}

.ticker-skew {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: visible;
    margin: 0;
    z-index: 20;
}

.ticker-wrap {
    overflow: visible;
    position: relative;
    z-index: 2;
    height: 68px;
    display: flex;
    align-items: center;
    width: 110vw;
    will-change: transform;
    margin-left: -2vw;
    margin-right: -2vw;
}

.ticker-wrap--yellow {
    transform: rotate(-4deg);
    z-index: 5;
}

.ticker-wrap--blue {
    background: var(--ticker-blue);
    transform: rotate(6deg);
    z-index: 4;
}

.ticker-inner {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    animation: ticker-scroll 18s linear infinite;
    will-change: transform;
}

.ticker-wrap--blue .ticker-inner {
    animation-duration: 30s;
    animation-direction: reverse;
}

.ticker-item {
    font-family: var(--f-display);
    font-size: clamp(1.8rem, 3.3vw, 3rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--navy);
    padding: 0 .75rem;
    white-space: nowrap;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
}


@media (max-width: 768px) {

    .hero-bg {
        margin-bottom: -40px;
    }

    .prizai-section,
    .survey-section,
    .gallery-section,
    .homepage-winners-section {
        margin-top: -80px;
        padding-top: 5rem;
    }

    .ticker-wrap {
        height: 54px;
    }

    .ticker-wrap--yellow {
        transform: rotate(-3deg);
    }

    .ticker-wrap--blue {
        transform: rotate(4deg);
    }
}

@media (max-width: 2559px) {
  .hero-bottle {
    max-width: 315px;
    scale: 1.65;
  }
}


@media (min-width: 2560px) {
  .container {
    max-width: 1600px;
  }

  .prizai-grid {
    align-items: start;
  }

  .img-towel {
    max-width: 400px;
  }
}

@media (min-width: 1400px) {
  .survey-section .survey-inner, .gallery-section .container {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .gallery-bg-img img {
    height: 96%;
    margin-top: -1rem;
  }
}


/* =========================================================================
   Locale picker banner — "Choose your country"
   Base: bottom-right card (mirrors cookie banner).
   --forced: full-screen modal with backdrop, scroll-lock, no dismiss button.
   ========================================================================= */

.locale-picker-banner {
  position: fixed;
  bottom: 2rem; right: 2rem;
  max-width: 360px;
  background: rgba(var(--navy-rgb), .97);
  border: 2px solid var(--yellow);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
  backdrop-filter: blur(10px);
  color: #fff;
  z-index: 1070;
}

.locale-picker-banner__text {
  font-family: var(--f-display);
  font-size: .9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--yellow);
  margin: 0 0 1rem;
  line-height: 1.3;
}

.locale-picker-banner__options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.locale-picker-banner__options li { margin: 0; }

.locale-picker-banner__option {
  display: inline-block;
  font-family: var(--f-display);
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .35);
  padding: .55rem 1.1rem;
  transition: background .2s, color .2s, border-color .2s;
}

.locale-picker-banner__option:hover,
.locale-picker-banner__option:focus-visible {
  background: var(--yellow);
  color: var(--navy);
  border-color: var(--yellow);
  outline: none;
}

.locale-picker-banner__option.is-current {
  background: var(--yellow);
  color: var(--navy);
  border-color: var(--yellow);
}

.locale-picker-banner__dismiss {
  position: absolute;
  top: .5rem; right: .65rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .7);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .4rem;
}

.locale-picker-banner__dismiss:hover,
.locale-picker-banner__dismiss:focus-visible {
  color: var(--yellow);
  outline: none;
}

/* --- Forced mode: full-screen modal, no dismiss --- */

.locale-picker-banner--forced {
  position: fixed;
  inset: 0;
  max-width: none;
  background: rgba(var(--navy-rgb), .92);
  border: none;
  padding: 2rem;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1080;
}

.locale-picker-banner--forced .locale-picker-banner__text {
  font-size: 1.6rem;
  text-align: center;
  max-width: 28rem;
  margin-bottom: 2rem;
}

.locale-picker-banner--forced .locale-picker-banner__options {
  justify-content: center;
  gap: 1rem;
}

.locale-picker-banner--forced .locale-picker-banner__option {
  font-size: 1rem;
  padding: 1rem 2rem;
  min-width: 8rem;
  text-align: center;
}

/* Scroll-lock when forced banner is on the page */
body:has(.locale-picker-banner--forced) {
  overflow: hidden;
}

@media (max-width: 768px) {
  .locale-picker-banner { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; padding: 1.25rem; }
  .locale-picker-banner--forced { padding: 1.5rem; }
  .locale-picker-banner--forced .locale-picker-banner__text { font-size: 1.25rem; margin-bottom: 1.5rem; }
  .locale-picker-banner--forced .locale-picker-banner__options { flex-direction: column; width: 100%; max-width: 16rem; }
  .locale-picker-banner--forced .locale-picker-banner__option { width: 100%; }
  .gallery-card-text > span, .fan-card-text {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   KAMPANIJA PASIBAIGĖ — post-campaign notice (modal + line over the form)
   Rendered only when CampaignEndedNotice::isActive(): LT/EE 2026-09-07,
   LV 2026-09-18. Visual language borrowed from the rules modal on purpose —
   same navy/yellow box, so it reads as part of the site, not a browser alert.
   ═══════════════════════════════════════════════════════════════════════ */
.ended-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;                       /* above the rules modal (2000) */
  background: rgba(0, 50, 165, .82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalIn .25s ease;
}
.ended-modal-overlay[hidden] { display: none; }

.ended-modal-box {
  background: var(--navy);
  border: 2px solid var(--yellow);
  max-width: 560px;
  width: 100%;
  padding: 3rem 2rem 2.25rem;
  position: relative;                  /* anchors .rules-modal-close */
  text-align: center;
  animation: modalBoxIn .25s ease;
}

.ended-modal-title {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1.0;
  margin: 0 0 1rem;
}

.ended-modal-body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--white);
  margin: 0 auto 1.75rem;
  max-width: 40ch;
}

.ended-modal-cta {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .75rem 2.5rem;
  transition: background .15s;
}
.ended-modal-cta:hover { background: #e8d73e; color: var(--navy); }

/* The default .survey-title is a 45px uppercase display line sized for three
   words; the post-campaign sentence is ~90 characters and needs body scale. */
.survey-title--ended {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  text-transform: none;
  line-height: 1.4;
  max-width: 48ch;
}

@media (max-width: 575.98px) {
  .ended-modal-box { padding: 2.75rem 1.25rem 1.75rem; }
  .ended-modal-cta { width: 100%; padding: .75rem 1rem; }
}