.iphone-mockup-wrapper {
      max-width: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      /*gap: clamp(20px, 4vw, 40px);*/
      gap: 15px;
    }

    .iphone-mockup-device {
      position: relative;
      width: 100%;
      max-width: min(393px, 90vw);
      aspect-ratio: 393 / 852;
      background: linear-gradient(135deg, #3a3a3c 0%, #1c1c1e 100%);
      border-radius: clamp(45px, 12vw, 55px);
      padding: clamp(8px, 2vw, 12px);
      box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.15),
        inset 0 0 0 2px rgba(0,0,0,0.3),
        0 0 0 2px rgba(255,255,255,0.1),
        0 0 0 clamp(4px, 1vw, 6px) #1c1c1e,
        0 clamp(20px, 5vw, 40px) clamp(60px, 15vw, 100px) rgba(0, 0, 0, 0.5),
        0 clamp(10px, 2vw, 15px) clamp(30px, 7vw, 50px) rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
      overflow: hidden;
    }

    .iphone-mockup-device:hover {
      transform: scale(1.02);
    }

    .iphone-dynamic-island {
      position: absolute;
      top: clamp(12px, 3vw, 16px);
      left: 50%;
      transform: translateX(-50%);
      width: clamp(110px, 28vw, 126px);
      height: clamp(32px, 8vw, 37px);
      background: #000;
      border-radius: clamp(16px, 4vw, 19px);
      z-index: 10;
      box-shadow: 
        inset 0 1px 3px rgba(0,0,0,0.8),
        0 2px 8px rgba(0,0,0,0.4);
      overflow: hidden;
    }

    .iphone-camera-cluster {
      position: absolute;
      top: 50%;
      left: 15%;
      transform: translateY(-50%);
      display: flex;
      gap: clamp(4px, 1vw, 6px);
      align-items: center;
    }

    .iphone-camera-lens {
      width: clamp(10px, 2.5vw, 12px);
      height: clamp(10px, 2.5vw, 12px);
      background: radial-gradient(circle, #1a4d6d 0%, #0a1f2d 60%, #000 100%);
      border-radius: 50%;
      box-shadow: 
        inset 0 1px 2px rgba(100,150,200,0.4),
        0 0 0 0.5px rgba(255,255,255,0.15);
      position: relative;
    }

    .iphone-camera-lens::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40%;
      height: 40%;
      background: radial-gradient(circle, rgba(100,150,255,0.5) 0%, transparent 70%);
      border-radius: 50%;
    }

    .iphone-camera-lens.main {
      width: clamp(12px, 3vw, 14px);
      height: clamp(12px, 3vw, 14px);
    }

    .iphone-proximity-sensor {
      position: absolute;
      top: 50%;
      right: 20%;
      transform: translateY(-50%);
      width: clamp(6px, 1.5vw, 8px);
      height: clamp(6px, 1.5vw, 8px);
      background: radial-gradient(circle, #1a1a2e 0%, #000 100%);
      border-radius: 50%;
      opacity: 0.6;
    }

    .iphone-action-button {
      position: absolute;
      left: -2px;
      top: clamp(140px, 16.5%, 160px);
      width: clamp(2px, 0.5vw, 3px);
      height: clamp(50px, 6%, 60px);
      background: linear-gradient(90deg, #1c1c1e 0%, #2c2c2e 50%, #3a3a3c 100%);
      border-radius: 0 2px 2px 0;
      box-shadow: inset -1px 0 2px rgba(0,0,0,0.6);
    }

    .iphone-volume-buttons {
      position: absolute;
      left: -2px;
      top: clamp(200px, 23.5%, 220px);
      display: flex;
      flex-direction: column;
      gap: clamp(10px, 1.2%, 14px);
    }

    .iphone-volume-button {
      width: clamp(2px, 0.5vw, 3px);
      height: clamp(28px, 3.3%, 35px);
      background: linear-gradient(90deg, #1c1c1e 0%, #2c2c2e 50%, #3a3a3c 100%);
      border-radius: 0 2px 2px 0;
      box-shadow: inset -1px 0 2px rgba(0,0,0,0.6);
    }

    .iphone-volume-button.long {
      height: clamp(48px, 5.6%, 58px);
    }

    .iphone-power-button {
      position: absolute;
      right: -2px;
      top: clamp(220px, 25.8%, 250px);
      width: clamp(2px, 0.5vw, 3px);
      height: clamp(60px, 7%, 72px);
      background: linear-gradient(90deg, #3a3a3c 0%, #2c2c2e 50%, #1c1c1e 100%);
      border-radius: 2px 0 0 2px;
      box-shadow: inset 1px 0 2px rgba(0,0,0,0.6);
    }

    .iphone-mockup-screen {
      position: relative;
      width: 100%;
      height: 100%;
      background: #000;
      border-radius: clamp(38px, 10vw, 46px);
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transform: translateZ(0);
    }

    /* Safari-specific fix για iOS */
    body.e--ua-appleWebkit .iphone-mockup-screen {
      max-height: 96% !important;
    }


    .iphone-video-container {
      /* position: absolute;
      top: 0;
      left: 0; */
      width: 100%;
      height: 100%;
      background: #000;
      overflow: hidden;
    }

    .iphone-video-container video {
      /* position: absolute;
      top: 0;
      left: 0; */
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .iphone-shorts-ui {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 5;
    }

    .iphone-sidebar-icons {
      position: absolute;
      right: clamp(12px, 3vw, 16px);
      bottom: clamp(100px, 14%, 140px);
      display: flex;
      flex-direction: column;
      gap: clamp(20px, 3.3%, 28px);
      pointer-events: all;
      max-width: clamp(42px, 5.5vw, 50px);
    }

    .iphone-icon-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(4px, 0.7%, 6px);
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      transition: transform 0.2s;
      font-size: clamp(11px, 1.4%, 12px);
      font-weight: 400;
    }

    .iphone-icon-btn:hover {
      transform: scale(1.1);
    }
    
    .iphone-icon-btn:focus{
        background-color: transparent;
    }

    .iphone-icon-btn svg {
      width: clamp(26px, 4%, 32px);
      height: clamp(26px, 4%, 32px);
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
      flex-shrink: 0;
    }

    .iphone-icon-btn span {
      font-weight: 400;
      text-shadow: 0 1px 3px rgba(0,0,0,0.8);
      white-space: nowrap;
    }

    .iphone-video-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: clamp(16px, 2.5%, 20px) clamp(12px, 3vw, 16px) clamp(20px, 3%, 24px);
      background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
      color: white;
      pointer-events: all;
    }

    .iphone-video-title {
      font-size: clamp(13px, 1.6%, 14px);
      line-height: 1.4;
      margin-bottom: clamp(10px, 1.4%, 12px);
      text-shadow: 0 1px 3px rgba(0,0,0,0.8);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-weight: 300;
    }

    .iphone-channel-info {
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.4%, 12px);
    }

    .iphone-channel-avatar {
      /* width: clamp(32px, 4.2%, 36px);
      height: clamp(32px, 4.2%, 36px); */
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea, #764ba2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: clamp(12px, 1.6%, 14px);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
      flex-shrink: 0;
    }

    .iphone-sidebar-icons button:hover{
          background-color:transparent!important;
      }

      button#iphoneSubscribeBtn:hover {
          background-color:#FF0000!important;
      }

    .iphone-channel-name {
      font-size: clamp(12px, 1.5%, 13px);
      font-weight: 400;
      text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    }

    .iphone-subscribe-btn {
      margin-left: auto;
      padding: clamp(6px, 0.9%, 8px) clamp(12px, 1.8%, 16px);
      background: white;
      color: black;
      border: none;
      border-radius: clamp(16px, 2%, 18px);
      font-weight: 600;
      font-size: clamp(12px, 1.4%, 13px);
      cursor: pointer;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .iphone-subscribe-btn:hover {
      transform: scale(1.05);
      background: #f0f0f0;
    }

    .iphone-mockup-navigation {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(16px, 3vw, 24px);
    }

    .iphone-nav-btn {
      width: clamp(48px, 10vw, 60px);
      height: clamp(48px, 10vw, 60px);
      border-radius: 50%;
      background: white;
      border: 1px solid #DEDDDD;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      /* box-shadow: 0 4px 20px rgba(0,0,0,0.2); */
      transition: all 0.3s;
      padding: 8px;
    }

    .iphone-nav-btn:hover,
    .iphone-nav-btn:focus{
      background: white;
      border: 1px solid #201F1F;
    }

    .iphone-nav-btn:hover:not(:disabled) {
      transform: scale(1.1);
      box-shadow: 0 6px 25px rgba(0,0,0,0.3);
    }

    .iphone-nav-btn:active:not(:disabled) {
      transform: scale(0.95);
    }

    .iphone-nav-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .iphone-video-counter {
      text-align: center;
      color: white;
      font-size: clamp(13px, 1.6%, 15px);
      font-weight: 400;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      letter-spacing: 0.5px;
    }

    .iphone-video-loading {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      z-index: 20;
      opacity: 1;
      transition: opacity 0.3s;
    }

    .iphone-video-loading.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .iphone-loading-spinner {
      width: clamp(36px, 5vw, 44px);
      height: clamp(36px, 5vw, 44px);
      border: 3px solid rgba(255,255,255,0.2);
      border-top-color: white;
      border-radius: 50%;
      animation: iphone-spin 0.8s linear infinite;
    }

    @keyframes iphone-spin {
      to { transform: rotate(360deg); }
    }

    .iphone-progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(255,255,255,0.2);
      z-index: 15;
    }

    .iphone-progress-fill {
      height: 100%;
      background: white;
      width: 0%;
      transition: width 0.1s linear;
    }
    
    .iphone-copy-notification {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.9);
      color: white;
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 400;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      text-align: center;
    }

    .iphone-copy-notification.show {
      opacity: 1;
    }

    @media (max-width: 768px) {
      .iphone-mockup-device {
        max-width: 95vw;
      }
      .iphone-mockup-screen {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
      .iphone-video-container {
        /* position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; */
        width: 100%;
        height: 100%;
      }
      .iphone-video-container video {
        width: 100%;
        height: 100%;
      }
      .iphone-sidebar-icons{
          gap: 0px;
      }
    }

    @media (max-width: 480px) {
      .iphone-mockup-wrapper {
        gap: 15px;
      }
      .iphone-mockup-device {
        max-width: 100%;
      }
    }

    @media (min-width: 1200px) {
      .iphone-mockup-device {
        max-width: 420px;
      }
    }

    @media (orientation: landscape) and (max-height: 600px) {
      .iphone-mockup-wrapper {
        flex-direction: row;
        gap: 20px;
        align-items: center;
      }
      .iphone-mockup-device {
        max-width: min(300px, 45vh);
      }
      .iphone-mockup-navigation {
        flex-direction: column;
      }
    }