/* =========================================================
   SPOLOČNÝ OBAL
   ========================================================= */

.atkx-video-wrap,
.atkx-video-wrap *{
  box-sizing:border-box;
}

.atkx-video-wrap{
  width:100%;
  max-width:400px;
  margin:0 auto;
}


/* =========================================================
   PREBIEHAJÚCA JESENNÁ AKCIA
   ========================================================= */

.atkx-mobile-gift{
  position:relative;

  width:100%;
  margin:0;
  padding:9px 12px 10px;

  overflow:hidden;

  border-radius:0;

  border:1px solid rgba(176,96,32,.30);
  border-bottom:0;

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.30) 22%,
      rgba(255,255,255,0) 46%
    ),
    radial-gradient(
      circle at 92% 100%,
      rgba(194,85,17,.13) 0%,
      rgba(194,85,17,0) 45%
    ),
    linear-gradient(
      135deg,
      #fff0d9 0%,
      #ffd6a3 48%,
      #f5b66d 100%
    );

  text-align:center;
  font-family:inherit;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55);
}


/* =========================================================
   DEKORATÍVNY JESENNÝ LIST
   ========================================================= */

.atkx-mobile-gift-leaf{
  position:absolute;

  top:7px;
  right:10px;

  font-size:34px;
  line-height:1;

  opacity:.38;

  transform:rotate(18deg);

  filter:saturate(1.2);

  pointer-events:none;

  z-index:1;
}


/* =========================================================
   PREBIEHAJÚCA AKCIA – KAPSULA
   ========================================================= */

.atkx-mobile-gift-top{
  position:relative;
  z-index:2;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin:0 0 4px;
  padding:4px 9px;

  border-radius:999px;

  background:rgba(158,70,21,.13);

  border:1px solid rgba(158,70,21,.14);

  color:#8b3f16;

  font-size:9px;
  line-height:1;
  font-weight:900;

  letter-spacing:.055em;
}


/* =========================================================
   HLAVNÝ TEXT
   ========================================================= */

.atkx-mobile-gift-title{
  position:relative;
  z-index:2;

  margin:0;

  color:#542b17;

  font-size:14px;
  line-height:1.25;
  font-weight:650;
}


.atkx-mobile-gift-title strong{
  color:#9a4216;

  font-weight:900;
}


/* =========================================================
   JESEŇ / HALLOWEEN
   ========================================================= */

.atkx-mobile-gift-choices{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:5px;

  margin-top:6px;
}


.atkx-mobile-gift-choices a,
.atkx-mobile-gift-choices a:link,
.atkx-mobile-gift-choices a:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:4px 10px;

  border-radius:999px;

  background:rgba(255,247,236,.80);

  border:1px solid rgba(176,96,32,.40);

  color:#8a3e16 !important;

  font-size:9px;
  line-height:1;
  font-weight:900;

  letter-spacing:.025em;

  text-decoration:none !important;

  box-shadow:
    0 1px 3px rgba(120,60,20,.06);

  transition:
    background-color .2s ease,
    transform .2s ease,
    filter .2s ease;
}


.atkx-mobile-gift-choices a:hover{
  background:#fff4e3;

  color:#783412 !important;

  text-decoration:none !important;

  filter:brightness(.98);

  transform:translateY(-1px);
}


.atkx-mobile-gift-choices a:active{
  transform:translateY(0);
}


.atkx-mobile-gift-choices span{
  color:#805337;

  font-size:9px;
  line-height:1;
  font-weight:600;
}


/* =========================================================
   SPODNÁ POZNÁMKA
   ========================================================= */

.atkx-mobile-gift-note{
  position:relative;
  z-index:2;

  margin-top:5px;

  color:#71472e;

  font-size:9px;
  line-height:1.2;
  font-weight:600;
}


/* =========================================================
   VIDEO
   ========================================================= */

.atkx-video-box{
  position:relative;

  width:100%;
  margin:0;

  border-radius:0;

  overflow:hidden;

  box-shadow:0 0 15px rgba(0,0,0,.3);
}


.atkx-video{
  width:100%;
  height:auto;

  display:block;

  pointer-events:none;
}


/* =========================================================
   SOCIÁLNE NOTIFIKÁCIE
   ========================================================= */

.atkx-social{
  position:absolute;

  left:50%;

  width:90%;

  transform:translateX(-50%);

  padding:10px;

  background:#fff;

  text-align:center;

  font-size:12px;
  color:#333;

  border-radius:15px;

  box-shadow:0 0 15px rgba(0,0,0,.3);

  display:flex;
  justify-content:center;
  align-items:center;

  z-index:10;
}


.atkx-social p{
  margin:0;

  display:flex;
  align-items:center;
  justify-content:center;
}


.atkx-social img{
  width:18px;
  height:18px;

  margin-right:8px;
}


.atkx-social a,
.atkx-social a:link,
.atkx-social a:visited{
  color:#333;
  text-decoration:none;
}


/* =========================================================
   FACEBOOK
   ========================================================= */

.atkx-social-facebook{
  top:-60px;

  animation:slideInOutTop 10s infinite;
}


/* =========================================================
   INSTAGRAM
   ========================================================= */

.atkx-social-instagram{
  bottom:-60px;

  animation:slideInOutBottom 10s infinite;
}


/* =========================================================
   YOUTUBE
   ========================================================= */

.atkx-social-youtube{
  bottom:75px;

  animation:slideInOutBottomDelayed 10s infinite;
}


/* =========================================================
   ANIMÁCIA FACEBOOK
   ========================================================= */

@keyframes slideInOutTop{

  0%{
    top:-60px;
    opacity:0;
  }

  5%{
    top:10px;
    opacity:1;
  }

  95%{
    top:10px;
    opacity:1;
  }

  100%{
    top:-60px;
    opacity:0;
  }

}


/* =========================================================
   ANIMÁCIA INSTAGRAM
   ========================================================= */

@keyframes slideInOutBottom{

  0%{
    bottom:-60px;
    opacity:0;
  }

  5%{
    bottom:10px;
    opacity:1;
  }

  95%{
    bottom:10px;
    opacity:1;
  }

  100%{
    bottom:-60px;
    opacity:0;
  }

}


/* =========================================================
   ANIMÁCIA YOUTUBE
   ========================================================= */

@keyframes slideInOutBottomDelayed{

  0%{
    bottom:-60px;
    opacity:0;
  }

  10%{
    bottom:60px;
    opacity:1;
  }

  95%{
    bottom:60px;
    opacity:1;
  }

  100%{
    bottom:-60px;
    opacity:0;
  }

}