/* ========================================
   PHONE MOCKUP STYLES
   Phone mockup components with side buttons, hover effects
   ======================================== */

/* ==================== PHONE MOCKUP STYLES - SIMULATOR STYLE ==================== */

.phone-section {
  display: flex;
  justify-content: center;
  position: relative;
}

.phone-image {
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

@media (max-width: 768px) {
  .phone-image {
    max-width: 280px;
  }
}

@media (max-width: 480px) {
  .phone-image {
    max-width: 260px;
  }
}

@media (max-width: 375px) {
  .phone-image {
    max-width: 200px;
  }
}

@media (max-width: 320px) {
  .phone-image {
    max-width: 180px;
  }
}

.video-player-square {
  width: 90vw !important;
  max-width: 800px !important;
  height: 500px !important;
  border-radius: 30px !important;
  background: #000 !important;
  padding: 5px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.video-player-square .side-buttons {
  display: none !important;
}

.video-player-square .video-thumbnail {
  border-radius: 30px !important;
}

.video-player-square .video-overlay {
  border-radius: 30px !important;
}

.video-player-square .video-container-dynamic {
  border-radius: 24px !important;
}

@media (max-width: 768px) {
  .video-player-square {
    width: 90vw !important;
    max-width: 600px !important;
    height: 380px !important;
  }
}

@media (max-width: 480px) {
  .video-player-square {
    width: 92vw !important;
    height: 300px !important;
    border-radius: 30px !important;
  }
  .video-player-square .video-thumbnail {
    border-radius: 30px !important;
  }
  .video-player-square .video-overlay {
    border-radius: 30px !important;
  }
}

@media (max-width: 375px) {
  .video-player-square {
    width: 300px !important;
    height: 300px !important;
  }
}

@media (max-width: 320px) {
  .video-player-square {
    width: 280px !important;
    height: 280px !important;
  }
}




.phone-mockup,
.phone-mockup-2,
.phone-mockup-3,
.phone-mockup-4 {
  width: 320px;
  height: 650px;
  background: linear-gradient(145deg, #4a4a4c, #6a6a6c);
  border-radius: 50px;
  padding: 8px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 42px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.8);
}

.phone-screen img {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.phone-screen img:hover {
  transform: scale(1.02);
}

/* Screenshot Styles */
.app-screenshot {
  width: 100%;
  height: 100%;
  object-position: center;
  border-radius: 32px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.app-screenshot:hover {
  transform: scale(1.02);
}

.app-screen-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 32px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.app-screen-bg:hover {
  transform: scale(1.02);
}

/* ==================== SIDE BUTTONS - SIMULATOR STYLE ==================== */

.side-buttons {
  position: absolute;
  z-index: 10;
}

/* LEFT SIDE - 3 buttons (like iPhone) */
.left-side {
  left: -2px;
  top: 60px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* RIGHT SIDE - power button (like iPhone) */
.right-side {
  right: -2px;
  top: 110px;
}

/* ALL PHONES - SAME STYLES */
.phone-mockup .silent-switch,
.phone-mockup-2 .silent-switch,
.phone-mockup-3 .silent-switch,
.phone-mockup-4 .silent-switch {
  width: 3px;
  height: 28px;
  background: linear-gradient(90deg, #4a4a4c, #5a5a5c);
  border-radius: 1.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  opacity: 0.65;
}

.phone-mockup .silent-switch::after,
.phone-mockup-2 .silent-switch::after,
.phone-mockup-3 .silent-switch::after,
.phone-mockup-4 .silent-switch::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0.2px;
  width: 2.6px;
  height: 12px;
  background: #ff6b35;
  border-radius: 1px;
  opacity: 0.6;
}

.phone-mockup .volume-up,
.phone-mockup .volume-down,
.phone-mockup-2 .volume-up,
.phone-mockup-2 .volume-down,
.phone-mockup-3 .volume-up,
.phone-mockup-3 .volume-down,
.phone-mockup-4 .volume-up,
.phone-mockup-4 .volume-down {
  width: 3px;
  height: 35px;
  background: linear-gradient(90deg, #4a4a4c, #5a5a5c);
  border-radius: 1.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.1);
  opacity: 0.65;
}

.phone-mockup .power-button,
.phone-mockup-2 .power-button,
.phone-mockup-3 .power-button,
.phone-mockup-4 .power-button {
  width: 3px;
  height: 55px;
  background: linear-gradient(90deg, #4a4a4c, #5a5a5c);
  border-radius: 1.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.1);
  opacity: 0.65;
}

/* HOVER EFFECTS - buttons blend with phone body on hover */
.phone-mockup:hover .silent-switch,
.phone-mockup:hover .volume-up,
.phone-mockup:hover .volume-down,
.phone-mockup:hover .power-button,
.phone-mockup-2:hover .silent-switch,
.phone-mockup-2:hover .volume-up,
.phone-mockup-2:hover .volume-down,
.phone-mockup-2:hover .power-button,
.phone-mockup-3:hover .silent-switch,
.phone-mockup-3:hover .volume-up,
.phone-mockup-3:hover .volume-down,
.phone-mockup-3:hover .power-button,
.phone-mockup-4:hover .silent-switch,
.phone-mockup-4:hover .volume-up,
.phone-mockup-4:hover .volume-down,
.phone-mockup-4:hover .power-button {
  background: linear-gradient(145deg, #4a4a4c, #6a6a6c);
  box-shadow: none;
  opacity: 0.45;
  transition: all 0.3s ease;
}

/* Individual button hover effects */
.silent-switch:hover,
.volume-up:hover,
.volume-down:hover,
.power-button:hover {
  background: linear-gradient(90deg, #4a4a4c, #6a6a6c, #5a5a5c);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -0.5px 0 rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

/* Smooth transitions for all buttons */
.silent-switch,
.volume-up,
.volume-down,
.power-button {
  transition: all 0.3s ease;
}

/* Silent switch - make orange more transparent on phone hover */
.phone-mockup:hover .silent-switch::after,
.phone-mockup-2:hover .silent-switch::after,
.phone-mockup-3:hover .silent-switch::after,
.phone-mockup-4:hover .silent-switch::after {
  opacity: 0.4;
}

/* ACTIVE STATES - pressed effect */
.silent-switch:active,
.volume-up:active,
.volume-down:active,
.power-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.2),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.3);
}

/* ==================== RESPONSIVE PHONE SIZES ==================== */

/* Tablets and Mobile Landscape (max-width: 768px) */
@media (max-width: 768px) {
  .phone-mockup,
  .phone-mockup-2,
  .phone-mockup-3,
  .phone-mockup-4 {
    width: 280px;
    height: 570px;
    border-radius: 45px;
    padding: 7px;
    margin: 15px auto;
  }

  .phone-screen {
    border-radius: 38px;
  }

  .app-screenshot,
  .app-screen-bg {
    border-radius: 30px;
  }

  /* Phone sections spacing to prevent overlap */
  .phone-section {
    margin-bottom: 15px;
    padding-bottom: 0px;
  }
}

/* Mobile Portrait (max-width: 480px) */
@media (max-width: 480px) {
  .phone-mockup,
  .phone-mockup-2,
  .phone-mockup-3,
  .phone-mockup-4 {
    width: 240px;
    height: 490px;
    border-radius: 40px;
    padding: 6px;
    margin: 12px auto;
  }

  .phone-screen {
    border-radius: 34px;
  }

  .app-screenshot,
  .app-screen-bg {
    border-radius: 26px;
  }

  /* Side buttons smaller */
  .left-side {
    left: -1.5px;
    top: 50px;
    gap: 12px;
  }

  .right-side {
    right: -1.5px;
    top: 90px;
  }

  .silent-switch,
  .volume-up,
  .volume-down {
    width: 2.5px;
    height: 28px;
  }

  .power-button {
    width: 2.5px;
    height: 45px;
  }

  /* Increase spacing between phone sections */
  .phone-section {
    margin-bottom: 15px;
    padding-bottom: 0px;
  }
}

/* Small Mobile Portrait (max-width: 375px) */
@media (max-width: 375px) {
  .phone-mockup,
  .phone-mockup-2,
  .phone-mockup-3,
  .phone-mockup-4 {
    width: 220px;
    height: 450px;
    border-radius: 38px;
    padding: 5px;
    margin: 10px auto;
  }

  .phone-screen {
    border-radius: 32px;
  }

  .app-screenshot,
  .app-screen-bg {
    border-radius: 30px;
  }

  /* Side buttons even smaller */
  .left-side {
    left: -1px;
    top: 45px;
    gap: 10px;
  }

  .right-side {
    right: -1px;
    top: 80px;
  }

  .silent-switch {
    width: 2px;
    height: 22px;
  }

  .volume-up,
  .volume-down {
    width: 2px;
    height: 26px;
  }

  .power-button {
    width: 2px;
    height: 40px;
  }

  /* Maximum spacing to prevent overlap */
  .phone-section {
    margin-bottom: 15px;
    padding-bottom: 0px;
  }
}

/* iPhone SE and similar small screens (max-width: 320px) */
@media (max-width: 320px) {
  .phone-mockup,
  .phone-mockup-2,
  .phone-mockup-3,
  .phone-mockup-4 {
    width: 200px;
    height: 410px;
    border-radius: 35px;
    padding: 5px;
    margin: 8px auto;
  }

  .phone-screen {
    border-radius: 30px;
  }

  .app-screenshot,
  .app-screen-bg {
    border-radius: 22px;
  }

  /* Hide side buttons on very small screens */
  .left-side,
  .right-side {
    display: none;
  }

  /* Extra spacing for smallest screens */
  .phone-section {
    margin-bottom: 15px;
    padding-bottom: 0px;
  }
}