.vk-final-container {
  width: 90%;
  max-width: 360px;
  margin: 30px auto;
  padding: 20px;
  border: 2px solid #155EEA;
  border-radius: 12px;
  background: #F9FCFF;
  box-sizing: border-box;
  overflow: visible;
}

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

/* Remove custom paddings on wrapper */
.swiper-wrapper {
  padding: 0 !important;
  box-sizing: border-box;
}

/* Use Swiper's built-in spacing */
.swiper-slide {
  display: flex;
  justify-content: center;
  /* margin removed, rely on spaceBetween option */
}

.vk-card {
  width: 80%;
  max-width: 320px;
  height: 200px;
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
  cursor: pointer;
}

.vk-front, .vk-back {
  width:100%;
  height:100%;
  position:absolute;
  top:0; left:0;
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  padding:20px;
  font-size:1.2em;
  font-weight:700;
  transition:transform .6s;
  box-shadow:0 3px 8px rgba(0,0,0,0.2);
}

.vk-front {
  background: linear-gradient(135deg,#155EEA,#6140FF);
  color:#fff;
}

.vk-back {
  background:#F0F0F0;
  color:#155EEA;
  transform:rotateY(180deg);
}

.vk-card.flipped .vk-front {transform:rotateY(180deg);}
.vk-card.flipped .vk-back  {transform:rotateY(0);}

.swiper-button-prev,
.swiper-button-next {
  color:#155EEA;
  width:44px;
  height:44px;
  top:50%;
  margin-top:-22px;
  z-index:10;
}

.vk-controls {
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.vk-button {
  padding:8px 16px;
  background:#155EEA;
  color:white;
  border:none;
  border-radius:6px;
  font-weight:600;
  cursor:pointer;
  transition:background .3s;
}

.vk-button:hover {
  background:#0b47b5;
}

@media (max-width:480px) {
  .vk-card {height:150px;}
  .vk-front, .vk-back {font-size:1em;padding:15px;}
}