html, body {
	height: 100%;
	margin: 0;
}

body{
	background:#092d74;
	overflow-x:hidden;
}

.split-container {
	height: 100vh;
}

.top-section {
	flex: 0 0 60%;
	background-color: #092d74;
	background:url('../images/background-top.jpg') repeat-x #092d74 bottom center;
}

.bottom-section {
	flex: 0 0 40%;
	background:url('../images/background-bottom.png') repeat-x #69c3e8 top center;
	color: white;
}

.nav-masthead span{
	background:url('../images/life.png') no-repeat 0 0;
	width:50px;
	height:61px;
	background-size:100%;
}

.nav-masthead span.active{
	background:url('../images/life-h.png') no-repeat 0 0;
	background-size:100%;
}

.cadre{
	position: relative;
	height: 100%; /* preia înălțimea din .top-section */
	/*display: flex;
	justify-content: center;
	align-items: flex-end;*/
	overflow: hidden;
}

.cadre .cadru-1 img.hot{
	position:absolute;
	bottom:0;
	z-index:3;
	left:-200px;
}

.cadre .cadru-1 {
  position: relative;
  height: 100%;
  width: 100%;
}

.cadre .cadru-1 img.sticla{
	position: absolute;
	bottom: 0;
	left:0;
	right:0;
	margin:0 auto;
	z-index: 2;
	max-height: 50vh;
	height: auto;
	width: auto;
}

.cadru-1 img.christmas-brew {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 4;
  max-height: 90vh; /* 🔥 se ajustează după viewport */
}

.cadre .cadru-1 img {
  height: auto;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.cadre .cadru-1 img.hot,
.cadre .cadru-1 img.christmas-brew {
  max-height: 90vh; /* adaptare la fereastră */
  height: auto;
  width: auto;
}

/* scor */

.box-scor{
    background:url('../images/scor-background.png') no-repeat 0 0;
    background-size:100%;
    display:block;
    margin:30px auto 0;
    padding:80px 30px 0 30px;
    max-width:500px;
    min-height:245px;
    line-height:100%;
    font-size:60px;
    color:#ffffff;
    justify-content: center; 
    align-items: center;      
    text-align: center;
    line-height:1.2;
}

.box-scor p, .box-scor span{margin:0;padding:0;line-height:100%;float: left;width:100%;}
.box-scor span{font-size:60px;margin-top:-20px;}

/* Animație */
@keyframes miscareHot {
  0% {
    left: -200px;
    opacity: 1;
  }
  50% {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
  }
  100% {
    left: 110%;
    opacity: 1;
  }
}

.animatie-hot {
  animation: miscareHot 5s linear forwards;
}

.sticla {
  transition: opacity 0.5s ease;
}

/* cadru 2 */

.cadru-2 {
  display: none;
  opacity: 0;
  transition: opacity 1s ease;
  height: 100%; /* ocupă toată secțiunea */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.cadru-2.active {
  display: flex; /* rămâne flex pentru centrare */
  opacity: 1;
}

.cadru-2 .container {
  text-align: center;
}

.cadru-2 .row {
  justify-content: center; /* centrează butoanele Da/Nu */
  margin-top: 20px;
}

/* cadru 3 */

.cadru-3 {
	display: none;
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  justify-content: center;
  align-items: center; /* ✅ centrare verticală */
  text-align: center;
  height:100%;
}

.cadru-3.active {
  display: flex !important;
  opacity: 1;
}

#header-nav,
#bulgare,
.cadru-3 {
  opacity: 0;
  display: none;
  transition: opacity 1s ease;
}

/* cadru 4 */

.cadru-4 {
  display: none;
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: url('../images/background-rotativ.png') repeat-x #092d74 bottom left;
  background-size: auto 100%;
}

/* fade-in */
.cadru-4.active {
  display: flex;
  opacity: 1;
}

.cadre .cadru-4 img.spiridus {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 5;
  height: 130px;
  width: auto;
  cursor: pointer;
  transition: left 0.1s linear;
}

.tinta {
  position: absolute;
  width: 80px;
  height: auto;
  pointer-events: none;
  z-index: 999;
  /* ✅ Transition eliminată pentru mișcare mai fluidă */
}

.spiridus {
  cursor: none !important; /* fără cursor mână */
}

.spiridus.hit {
  animation: hitEffect 0.4s ease;
}

@keyframes hitEffect {
  0% { transform: translateX(0) scale(1); filter: brightness(1); }
  25% { transform: translateX(-10px) scale(1.05); filter: brightness(1.6); }
  50% { transform: translateX(10px) scale(0.95); filter: brightness(0.8); }
  75% { transform: translateX(-5px) scale(1.05); filter: brightness(1.3); }
  100% { transform: translateX(0) scale(1); filter: brightness(1); }
}

/* cadru 5 */

.cadru-5 {
	display: none;
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  justify-content: center;
  align-items: center; /* ✅ centrare verticală */
  text-align: center;
  height:100%;
}

.cadru-5.active {
  display: flex !important;
  opacity: 1;
}


.cadru-5 {
  opacity: 0;
  display: none;
  transition: opacity 1s ease;
}

.hide {
	opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  display: none; /* toate cadrele ascunse implicit */
}

.show {
display: flex !important;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.8s ease;
}

.spiridus.hit {
  animation: shakeHit 0.3s ease-in-out;
}

@keyframes shakeHit {
  0%, 100% { transform: translateX(0) scale(1.1); }
  25% { transform: translateX(-8px) scale(1.2); }
  50% { transform: translateX(8px) scale(1.2); }
  75% { transform: translateX(-4px) scale(1.1); }
}

/* cadru-form */
.cadru-form {
  transition: opacity 1s ease;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.cadru-form.active {
  display: flex !important;
  opacity: 1;
}

.formular input.form-control{
	background:url('../images/bkg-input-new.png') no-repeat #002D74 top center;
	background-size:100%;
	font-size:32px;
	color:#ffffff;
	border: none;
	height:70px;
}

.formular button[type="submit"] {
	background:url('../images/bkg-input-new.png') no-repeat #002D74 top center;
	background-size:100%;
	border: none;
	height:70px;
	font-size:32px;
	color:#ffffff;
	width:100%;
}

.formular button[type="submit"]:hover{
	border:none;
	text-decoration:underline;
	color:#ffffff;
}

.formular label{
	font-size:26px;
	margin:0;
	padding:0;
	line-height: 120%;
}

.formular ::placeholder {
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}

.formular .invalid-feedback {
	font-size: 16px;
	text-align: center;
	margin-top: -5px;
}

.form-check-input {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid #fff;
  background-color: transparent;
  cursor: pointer;
}

.form-check-input:checked {
  background-color: #00b3ff;
  border-color: #00b3ff;
}

.formular .form-check-label {
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding:0 0 0 10px;
}

.form-check-label a {
  color: #69c3e8;
  text-decoration: underline;
}

.form-check-label a:hover {
  color: #00b3ff;
}


/* felicitari */

.cadre img.felicitari-img{
	width:650px;
}

.cadre img.necastigator-img{
	width:450px;
}

img.felicitari-bottom{
	max-width:400px;
}


/* adaos */

#spiridus-move,
#spiridus-lovit {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  height: 130px;
  width: auto;
}

#spiridus-lovit {
  display: none;
}


.box-custom{
	background:url('../images/background-pagina-custom.png') no-repeat 0 0;
	background-size:100%;
	display:block;
	margin:30px auto 60px;
	padding:30px;
	max-width:500px;
	min-height:365px;
	font-size:32px;
	color:#ffffff;
	display: flex;
	justify-content: center; 
	align-items: center;      
	text-align: center;
	line-height:1.2;
}

.box-custom.box-custom-small{
	max-width:380px;
	min-height:278px;
}

@media (max-width: 991px){
	.box-custom{
		background:#002d74;
		width:100%;
		height:auto;
		max-width:100%;
		min-height:auto;
		border:10px solid #9bca40;
	}

  .box-scor{
        background:#002d74;
        width:100%;
        height:auto;
        max-width:100%;
        min-height:auto;
        border:10px solid #9bca40;
        float: left;
        padding:30px;
    }
}