@font-face {
	font-family: 'vag_rounded_lt_problack';
	src: url('../fonts_old/vagroundedltpro-black-webfont.woff2') format('woff2'),
		 url('../fonts_old/vagroundedltpro-black-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
  font-family: "VAG Rounded Thin";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src:
    url("../fonts/thin/VAGRounded.woff2") format("woff2"),
    url("../fonts/thin/VAGRounded.woff") format("woff"),
    url("../fonts/thin/VAGRounded.ttf") format("truetype");
}

@font-face {
  font-family: "VAG Rounded Bold";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    url("../fonts/bold/VAGRounded.woff2") format("woff2"),
    url("../fonts/bold/VAGRounded.woff") format("woff"),
    url("../fonts/bold/VAGRounded.ttf") format("truetype");
}



html {
  scroll-behavior: smooth;
  
}

body {
 font-family: 'VAG Rounded Bold',sans-serif;
 font-weight: 700;
  margin: 0;
  padding: 0;
}
a, p, h1, h2, h3, h4, h5, h6{
  font-family: 'VAG Rounded Bold',sans-serif;
   font-weight: 700;
}
input,
button,
textarea,
select {
  font-family: 'VAG Rounded Bold', sans-serif;
  font-weight: 700;
}

section.screen {
  height: 100vh;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: VAG Rounded,sans-serif;
   font-weight: 700;
}

.bg-blue {
  background-color: #0061AF;
  color: #FFFFFF;
}

.bg-yellow {
  background-color: #FDBB2F;
  color: #fff;
}

.text-red {
  color: #ED1C24;
}

.btn-custom {
  background-color: #ED1C24;
  color: #FFFFFF;
  border: none;
}

input::placeholder {
  color: #AAAAAA;
}

.form-control {
  border-radius: 2rem;
  background-color: #FFFFFF;
  color: #000000;
}

button.btn-custom:focus,
input:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(237, 28, 36, 0.25);
}

.screen h1{
	font-size: clamp(2rem, 5vw + 1rem, 6.75rem);
    line-height: 1.1;
}
.screen p{
	font-size: clamp(1rem, 2vw + 0.5rem, 2.6875rem);
	  line-height: 1.3;
}
.btn-outline-white {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  transition: all 0.3s ease;
  font-size: clamp(1rem, 2vw + 0.5rem, 2.6875rem);
}

.btn-outline-white:hover {
  background-color: #ffffff;
  color: #1672B9;
  text-decoration: none;
}

.haribo-title {
  font-size: clamp(2rem, 5vw + 1rem, 6.75rem);
  line-height: 1.1;
  text-align: center;
}

.haribo-inline-img {
  height: 1.5em;
  vertical-align: middle;
  margin: 0 0.1em;
}

/* Stiluri comune pentru ambele jeleuri */
.bg-jeleu {
  position: absolute;
  width: 60%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.9; /* dacă vrei efect subtil */
}

/* Stânga - jos spre mijloc (top 60%) */
.bg-jeleu-left {
  	left: -30%;
	width: 50%;
	bottom: 10%;
}

/* Dreapta - sus spre mijloc (right 30%) */
.bg-jeleu-right {
  top: 10%;
	right: -30%;
}
section.position-relative {
  overflow: hidden;
}
.haribo-gold-img {
  max-width: 70%;
  height: auto;
}
h2{
  font-size: clamp(1.75rem, 4vw + 1rem, 5.4375rem);
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.25rem, 2.5vw + 0.5rem, 3.125rem);
  line-height: 1.3;
}
h3 strong.strong-big{
  display: inline-block;
  font-size: clamp(2rem, 5vw + 1rem, 5.75rem); /* final: 92px */
  line-height: 1;
  font-weight: bold;
}

.inline-logo {
  height: 1.2em;
  vertical-align: middle;
  margin-left: 0.25em;
  display: inline-block;
}


/* Culori fundal boxuri */
.bg-blue {
  background-color: #1672b9;
}

.bg-pink {
  background-color: #ea4e54;
}

/* Box container imagine */
.premiu-box {
  width: 70%;
  max-width: 380px;
  margin-top: 2rem;
  height: 100%;
}

 .swiper.premii-slider {
  width: 100%;
  max-width: 600px;
  margin: 40px auto;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 40px;
  padding-top: 60px;
 
}

.swiper-slide.swiper-slide-premiu {
  display: flex;
  flex-direction: column;
  /* Asigură înălțimea fixă comună pentru slide-uri */
  height: auto !important;

}

.premiu-slide {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
 
}

.premiu-box {
  margin-top: auto; /* forțează box-ul să se ducă jos */

}
.swiper-wrapper{
 
}
.swiper-pagination{
  bottom: -30px !important;
  position: relative !important;
}

.tricou-box {
  position: relative;
  overflow: visible; 
}
.tricou-box  img.img-fluid {
  width: 140%;
  margin-left: -20%;
  max-width: 140%;
}

#upload-form,
#inscriere-form{
  max-width: 80%;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
#upload-form button,
#upload-form input,
#inscriere-form button,
#inscriere-form input,
#inscriere-form select{
  width: 100%;
  min-height: 50px;
  font-size: 20px;
  
}
#promotie p{
  font-family: "VAG Rounded Thin";
  font-weight: 300;
  font-size: 14px;
}
.font-thin{
  font-family: "VAG Rounded Thin" ,sans-serif !important;
  font-weight: 300;
}
.font-bold{
  font-family: 'VAG Rounded Bold',sans-serif !important;
   font-weight: 700;
}
#upload-form button,
#inscriere-form button{
  font-size: clamp(1.25rem, 2.5vw + 0.5rem, 3.125rem);
}


.upload-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: 60px; /* sau cât ai nevoie */
  background-color: rgba(255, 255, 255, 0.1); /* transparent */
  border: 2px solid white;
  border-radius: 40px;
  cursor: pointer;
  overflow: hidden;
}

.upload-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* transparent input */
  cursor: pointer;
  z-index: 2;
}

.upload-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
  color: white;
  font-weight: bold;
  font-family: 'VAG Rounded Bold', sans-serif;
  z-index: 1;
  pointer-events: none; /* ca să nu blocheze clickul pe input */
}

.icon-camera {
  background-image: url('../images/icon_camera.png');
  background-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
}

.form_ label.error{
  color: red;
  margin-bottom: 10px;
  font-size: 14px;
}
#inscriere-form.form_ label.error{
  color: white;
}

.preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #1672b9;
 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-family: sans-serif;
}

.preloader_circular {
  animation: rotate 2s linear infinite;
  width: 50px;
  height: 50px;
}

.preloader_path {
  stroke: red;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120;
  }
}

#inscriere-form input,
#inscriere-form select{
    background-color: #1672b9;
    padding: .375rem 1.5rem;
    color: #fff;
}

#inscriere-form  input::placeholder {
  color: #fff;
}

#inscriere-form  input::-webkit-input-placeholder {
  color: #fff;
}

#inscriere-form  input:-ms-input-placeholder {
  color: #fff;
}

#inscriere-form  input::-ms-input-placeholder {
  color: #fff;
}
.form-control:focus{
  border-color: #FDBB2F;
}
.custom-select {
  appearance: none; /* Elimină săgeata implicită (Chrome, Safari, etc.) */
  -webkit-appearance: none; /* Safari */
  -moz-appearance: none; /* Firefox */
  background: transparent url('data:image/svg+xml;utf8,<svg fill="white" height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 1rem center;
  
}

#inscriere-form input.form-check-input{
    width: 20px;
    height: 20px;
    padding: 5px;
    min-height: 20px;
    margin-right: 5px;
  
}
#inscriere-form p.form-check{
   font-size: 1rem; 
   line-height: 1.8;
}
#inscriere-form p.form-check a{
  color: #fff;
  text-decoration: underline;
}
#inscriere-form  .form-check-input:checked{
  border-color: #fff;
}

.form_response_error {
  color: red;
  background: #fff;
  font-size: 16px;
}
.form_response_error ul{
  list-style: none;
  padding: 20px 0;
}
.form_response_error p{
  padding: 20px 0;
  margin: 0;
  font-family: "VAG Rounded Thin" ,sans-serif !important;
  font-weight: 300;
}


.haribo-gold-img {
  position: relative;
  z-index: 2;
  //width: 80%;   /* Ursulețul central ocupă 70% din col */
  //max-width: 400px;
}

/* Packshoturi */
.packshot {
  position: absolute;
  width: 80%;     /* fiecare packshot ~70% din dim. ursulețului */
  z-index: 1;
  opacity: 0.95;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Poziționare cu % */
.packshot-top-left {
  top: -10%;
  left: -10%;
  width: 65%;
}

.packshot-top-right {
  top: -10%;
  right: -10%;
  width: 60%;
}

.packshot-bottom-left {
  bottom: -1%;
  left: -20%;
  width: 65%;
}

.packshot-bottom-right {
  bottom: -1%;
  right: -20%;
  width: 65%;
}

/* Hover effect */
.packshot:hover {
  transform: scale(1.05);
  opacity: 1;
}

.premiu-box{
  position: relative;
}
.premiu_box img.img-fluid{
  
}
.premii_nr{
  position: absolute;
  width: 35%;
  right: -10%;
  bottom: -5%;
}
#premii .jeleu{
  position: absolute;
}
#jeleu1{
  top: -8%;
  left: 10%;
  width: 15%;
}
#jeleu2{
  bottom: 10%;
  left: -5%;
  width: 15%;
}
#jeleu3{
  top: 5%;
  right: -5%;
  width: 15%;
}
#jeleu4{
  bottom: 40%;
  right: -2%;
  width: 30%;
}
#jeleu5{
  top: -9%;
  left: 2%;
  width: 30%;
}


.swiper-packshots {
  width: 100%;
  overflow: hidden;
}

.swiper-packshots .swiper-wrapper {
  display: flex;
}

.swiper-packshots .swiper-slide {
  flex-shrink: 0;
}
.swiper-slide.swiper-slider-packshot {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide.swiper-slider-packshot img {
  width: 100%;
  max-width: 100%; /* ajustează dimensiunea packshoturilor */
  height: auto;
  transition: transform .2s; /* Animation */
}
.swiper-slide.swiper-slider-packshot img:hover{
  transform: scale(1.05); 
}
.ate_cookie_wrapper p{
  margin-bottom: 0 !important;
}
.socialmedia-screen.screen p{
  font-size: 20px;
  font-size: clamp(1rem, 1.2vw + 0.6rem, 1.25rem);
}


@media (min-width: 1200px) {
  section.screen{
    padding-left: 15%;
    padding-right: 15%;
  }
  section.screen6{
    padding-left: 4%;
    padding-right: 4%;
  }
  
}

@media (min-width: 993px) {
  .swiper{
    max-width: 100% !important;
  }
  .premii-slide .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    transform: none !important;
    transition: none !important;
  }
  .swiper-slide.swiper-slide-premiu {
    width: 50% !important; /* sau procent fix dacă vrei grilă */
    flex: 1 0 auto;
  }
  .swiper-pagination,
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
}


@media (min-width: 767px) {
	section.screen {
		height: auto;
		min-height: unset;
		justify-content: flex-start;
		padding-top: 4rem;
		padding-bottom: 4rem;
	  }
  .bg-jeleu {
	width: 30%;
  }
  .bg-jeleu-left {
	  left: -15%;
	  width: 25%;
	}
	.bg-jeleu-right {
	  right: -15%;
	}
  
 
}
@media (max-width: 767px) {
  .premiu-box{
    width: 100%;
  }
  section.screen {
    min-height: 80vh;
   
    justify-content: flex-start;
    padding-top: 4rem;
    padding-bottom: 4rem;
    height: auto;
  }
  section.screen6 {
    min-height: auto;
  }
  
  #jeleu1 {
    top: -10%;
    left: 10%;
    width: 25%;
  }
  #jeleu2 {
    bottom: 10%;
    left: -10%;
    width: 25%;
  }
  #jeleu3{
    top: 5%;
    right: -10%;
    width: 25%;
  }
  
  #jeleu4 {
   bottom: 45%;
   right: 0%;
   width: 40%;
  }
  #jeleu5 {
    top: -9%;
    left: 7%;
    width: 30%;
  }
  .swiper.premii-slider{
    padding-top: 70px;
  }

}


@media (max-width: 576px) {
 
  .tricou-box  img.img-fluid {
    width: 120%;
    margin-left: -10%;
    max-width: 120%;
  }
  .swiper-slide.swiper-slide-premiu{
    max-width: 80%;
    margin: 0 10%;
  }
  #jeleu1 {
    top: -7%;
    left: 10%;
    width: 25%;
  }
  #jeleu2 {
    bottom: 10%;
    left: -10%;
    width: 25%;
  }
  #jeleu3{
    top: 5%;
    right: -10%;
    width: 25%;
  }
 
  #jeleu4 {
    bottom: 60%;
    right: -15%;
    width: 40%;
  }
  #jeleu5 {
    top: -12%;
    left: -14%;
    width: 40%;
  }
}