@font-face {
  font-family: 'Area Extended';
  src: url("../fonts/AreaExtended-ExtraBold-YN0uNeQ.woff2") format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Area Extended';
  src: url("../fonts/AreaExtended-Black-nvkA2Dg.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Area Normal';
  src: url("../fonts/AreaNormal-Regular-iECWtZS.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

: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 Normal', Arial, sans-serif;
  --nav-h:     68px;
}

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

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

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

.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;
}
.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: skewY(-3deg); }
.ticker-wrap--blue   { background: var(--ticker-blue);
  transform: skewY(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-_ZONxcd.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%;
}

.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(-125px);
    z-index: 1;
    position: relative;
    padding: 2rem 2rem 0;
}

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

.prizai-top-banner {
  background: var(--yellow);
  padding: .85rem 0;
  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: 3rem;
  align-items: end;
}

.prizai-text-col .prizai-desc {
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.25;
  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-towel {
    max-width: 240px;
    width: 100%;
    transform: translate(-80px, -15px);
}
.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%);
  }

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

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

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

  .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-top-banner p > span {
    font-size: 2.25em;
  }

  .prizai-top-banner p > span:last-of-type {
    font-size: 1.6em;
  }

  .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(45deg);
  }

  .img-towel {
    max-width: 140px;
    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;
}

.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.0;
    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: 700;
  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: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.form-group.form-check .invalid-feedback {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 0.15rem;
    margin-left: 0.5rem;
}

.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: 700;
  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;
    transform: rotate(2deg);
}
.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;
}
.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;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   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: 300px;          /* active card = 280 px; 10 px breathing room each side */
  margin: 0 -24px;        /* bleed beyond .container padding */
  width: calc(100% + 48px);
  cursor: grab;
  user-select: none;
}
.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: 260px;
  height: 240px;
  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.15;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * All cards: 260×240 px (uniform — no width/height change between slots).
 * Scale drives visual size. Equal gaps G = 20 px:
 *
 *   slot  0   260×240  0°    scale 1.00  → visual half = 130 px
 *   slot ±1   260×240  ±3°   scale 0.82  → scaled 213×197 → half = 107·cos3°+98·sin3° ≈ 112 px
 *   slot ±2   260×240  ±6°   scale 0.67  → scaled 174×161 → half = 87·cos6°+80·sin6° ≈  95 px
 *
 *   centre ±1 = 130+20+112 = 262 px
 *   centre ±2 = 262+112+20+95 = 489 px  (right edge 584 px < 624 px stage half ✓)
 */
.fan-card[data-slot="-1"] { left: calc(50% - 262px); transform: translate(-50%, -50%) rotate(-3deg) scale(0.82); }
.fan-card[data-slot="1"]  { left: calc(50% + 262px); transform: translate(-50%, -50%) rotate(3deg)  scale(0.82); }
.fan-card[data-slot="-2"] { left: calc(50% - 489px); transform: translate(-50%, -50%) rotate(-6deg) scale(0.67); }
.fan-card[data-slot="2"]  { left: calc(50% + 489px); 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: 260px;
    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);
}

/* ── States ── */

.no-winners {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  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: 700;
  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-8uKJKsG.png") left bottom / contain no-repeat, var(--navy);
  min-height: 38vh;
  position: relative;
  overflow: hidden;
  padding: 3rem 0 2rem;
  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.1;
  letter-spacing: -.01em;
  margin: 0 0 1.5rem;
}

.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: 400px;
  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: 520px;
  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: 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;
  }
}

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

@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-8uKJKsG.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: 2.4rem; }

  .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; }  /* proportional reduction on tablet/mobile */
  .ticker-item { font-size: 1.5rem; }

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

  .winners-title { font-size: 1.5rem; }

  /* ── Fan carousel — mobile ── */
  .fan-stage {
    height: 250px;
  }
  /*
   * 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   200×185  0°    scale 1.00  → visual half = 100 px
   *   slot ±1   200×185  ±3°   scale 0.82  → visual half ≈  82 px
   *   centre ±1 = 100+15+82 = 197 px
   */
  .fan-card {
    width: 200px;
    height: 185px;
  }
  .fan-card[data-slot="-1"] { left: calc(50% - 197px); }
  .fan-card[data-slot="1"]  { left: calc(50% + 197px); }
  /* ±2 hidden on mobile — off-screen buffer */
  .fan-card[data-slot="-2"] { left: calc(50% - 380px); opacity: 0; }
  .fan-card[data-slot="2"]  { left: calc(50% + 380px); opacity: 0; }
}

@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;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .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;
  }
  .hero-headline { font-size: 2.25rem; }
  .survey-top-strip h2 { font-size: 2.2rem; }
  .ticker-wrap { height: 40px; }
  .ticker-item { font-size: 1.25rem; }
}

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

  .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; }
}