/* Socket.IO Display CSS */
/* ===================== Base Styles ===================== */
.socket-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent !important;
  display: none;
  z-index: 10000;
  pointer-events: none;
  /* เพิ่ม flexbox สำหรับจัดกึ่งกลาง */
  align-items: center;
  justify-content: center;
}

.socket-overlay.show {
  display: flex; /* เปลี่ยนจาก block เป็น flex */
}

/* Content wrapper for positioning */
.socket-content-wrapper {
  pointer-events: auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative; /* เปลี่ยนจาก fixed เป็น relative */
  z-index: 10001;
  transition: all 0.3s ease;
  margin: auto; /* เพิ่มเพื่อช่วยจัดกึ่งกลาง */
}

/* ===================== Container Styles ===================== */
.socket-image-container,
.socket-text-container {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
}

.socket-image-container.show,
.socket-text-container.show {
  display: block;
}

/* Image Styles */
.socket-display-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
  cursor: default;
  transition: transform 0.3s ease;
}

.socket-display-image.clickable {
  cursor: pointer !important;
}

.socket-display-image.clickable:hover {
  transform: scale(1.02);
}

/* Text Container */
.socket-text-content {
  padding: 20px;
  height: 100%;
  overflow: auto;
  line-height: 1.6;
  font-family: "Kanit", sans-serif;
}

/* Close Button */
.socket-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.8);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  color: white;
  gap: 5px;
}

.socket-close-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.socket-close-btn svg {
  width: 20px;
  height: 20px;
  fill: white;
}

.socket-close-btn span {
  font-size: 12px;
}

/* Link Indicator */
.link-indicator {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgba(33, 150, 243, 0.9);
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  display: none;
  align-items: center;
  gap: 5px;
  animation: pulse 2s infinite;
}

.link-indicator svg {
  width: 16px;
  height: 16px;
}

@keyframes pulse {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

/* ===================== Special Content Styles ===================== */
/* QR Code Display */
.qrcode-standalone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 30px;
  text-align: center;
}

.qrcode-standalone h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.qrcode-container {
  margin: 20px 0;
}

.qrcode-url {
  color: #666;
  font-size: 14px;
  word-break: break-all;
  max-width: 300px;
}

/* Coupon Display */
.coupon-standalone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  cursor: pointer;
  text-align: center;
  transition: transform 0.3s ease;
}

.coupon-standalone:hover {
  transform: scale(1.02);
}

.coupon-standalone .description {
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 1.4;
}

.coupon-standalone .code {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 3px;
  padding: 15px 30px;
  border: 3px dashed rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.1);
}

.coupon-standalone .hint {
  font-size: 14px;
  opacity: 0.9;
}

/* ===================== Status & Notifications ===================== */
/* Status Indicator */
.socket-status {
  position: fixed;
  right: 20px;
  top: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  transition: all 0.3s ease;
}

.socket-status-dot {
  width: 8px;
  height: 8px;
  background: #ff5252;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.socket-status.connected .socket-status-dot {
  background: #4caf50;
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Countdown Timer */
.socket-countdown {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 15px 25px;
  border-radius: 25px;
  font-size: 16px;
  display: none;
  align-items: center;
  gap: 10px;
  z-index: 10002;
  font-family: "Kanit", sans-serif;
}

.socket-countdown.show {
  display: flex;
  animation: slideIn 0.5s ease;
}

.socket-countdown-number {
  font-size: 20px;
  font-weight: bold;
  color: #ff5252;
}

/* Copy Notification */
.copy-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(76, 175, 80, 0.95);
  color: white;
  padding: 20px 40px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
  z-index: 10003;
  transition: transform 0.3s ease;
  font-family: "Kanit", sans-serif;
}

.copy-notification.show {
  transform: translate(-50%, -50%) scale(1);
}

/* ===================== Position Styles (ปรับใหม่) ===================== */
/* ใช้ flexbox สำหรับการจัดตำแหน่ง */

/* Top positions */
.socket-overlay.position-top-left,
.socket-overlay.position-top-center,
.socket-overlay.position-top-right {
  align-items: flex-start;
  padding-top: 20px;
}

/* Middle positions */
.socket-overlay.position-middle-left,
.socket-overlay.position-center,
.socket-overlay.position-middle-right {
  align-items: center;
}

/* Bottom positions */
.socket-overlay.position-bottom-left,
.socket-overlay.position-bottom-center,
.socket-overlay.position-bottom-right {
  align-items: flex-end;
  padding-bottom: 20px;
}

/* Left positions */
.socket-overlay.position-top-left,
.socket-overlay.position-middle-left,
.socket-overlay.position-bottom-left {
  justify-content: flex-start;
  padding-left: 20px;
}

/* Center horizontal positions */
.socket-overlay.position-top-center,
.socket-overlay.position-center,
.socket-overlay.position-bottom-center {
  justify-content: center;
}

/* Right positions */
.socket-overlay.position-top-right,
.socket-overlay.position-middle-right,
.socket-overlay.position-bottom-right {
  justify-content: flex-end;
  padding-right: 20px;
}

/* Fullscreen position */
.socket-overlay.position-fullscreen {
  padding: 0;
}

.socket-overlay.position-fullscreen .socket-content-wrapper {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
}

/* Size classes */
.socket-content-wrapper.size-small {
  width: 300px;
  height: 200px;
}

.socket-content-wrapper.size-medium {
  width: 500px;
  height: 400px;
}

.socket-content-wrapper.size-large {
  width: 800px;
  height: 600px;
}

.socket-content-wrapper.size-full {
  width: 90vw;
  max-width: 1200px;
  height: auto;
}

.socket-content-wrapper.size-compact {
  width: 90%;
  max-width: 400px;
}

/* ===================== Animations ===================== */
/* Animation classes */
.socket-content-wrapper.animate-in {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

.socket-content-wrapper.animate-out {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

/* Fade animations */
.animation-fade.animate-in {
  animation-name: socketFadeIn;
}

.animation-fade.animate-out {
  animation-name: socketFadeOut;
}

@keyframes socketFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes socketFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Slide animations - ปรับให้ไม่กระทบการจัดกึ่งกลาง */
@keyframes socketSlideUpIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes socketSlideDownIn {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes socketSlideLeftIn {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes socketSlideRightIn {
  from {
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Zoom animations */
@keyframes socketZoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes socketBounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animation classes mapping */
.animation-slide-up.animate-in { animation-name: socketSlideUpIn; }
.animation-slide-down.animate-in { animation-name: socketSlideDownIn; }
.animation-slide-left.animate-in { animation-name: socketSlideLeftIn; }
.animation-slide-right.animate-in { animation-name: socketSlideRightIn; }
.animation-zoom.animate-in { animation-name: socketZoomIn; }
.animation-bounce.animate-in { animation-name: socketBounceIn; }

/* ===================== Mobile Responsive ===================== */
@media (max-width: 768px) {
  /* ปรับ padding สำหรับ mobile */
  .socket-overlay[class*="position-top"] {
    padding-top: 10px;
  }
  
  .socket-overlay[class*="position-bottom"] {
    padding-bottom: 10px;
  }
  
  .socket-overlay[class*="position-left"] {
    padding-left: 10px;
  }
  
  .socket-overlay[class*="position-right"] {
    padding-right: 10px;
  }

  .socket-content-wrapper {
    min-width: 280px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .socket-text-content {
    padding: 15px;
  }

  .qrcode-standalone,
  .coupon-standalone {
    padding: 20px;
  }

  /* Mobile-specific positions - override flexbox */
  .socket-content-wrapper.mobile-bottom-sheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: 70vh;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    margin: 0 !important;
  }

  .socket-content-wrapper.mobile-top-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100px;
    border-radius: 0 0 15px 15px;
    margin: 0 !important;
  }

  .socket-content-wrapper.mobile-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    border-radius: 0;
    margin: 0 !important;
  }

  /* Smaller close button on mobile */
  .socket-close-btn {
    width: 35px;
    height: 35px;
    top: 10px;
    right: 10px;
  }

  .socket-close-btn span {
    display: none;
  }

  /* Adjust other elements */
  .link-indicator {
    font-size: 12px;
    padding: 6px 12px;
    bottom: 10px;
    right: 10px;
  }

  .socket-status {
    top: 10px;
    right: 10px;
    padding: 8px 15px;
    font-size: 12px;
  }

  .socket-countdown {
    top: 10px;
    right: 10px;
    padding: 10px 15px;
    font-size: 14px;
  }

  .socket-countdown-number {
    font-size: 16px;
  }

  /* Coupon adjustments */
  .coupon-standalone .code {
    font-size: 28px;
    padding: 10px 20px;
  }

  .coupon-standalone .description {
    font-size: 16px;
  }
}

/* Small mobile devices */
@media (max-width: 360px) {
  .socket-content-wrapper {
    min-width: 240px;
  }

  .socket-text-content {
    padding: 10px;
  }

  .qrcode-standalone,
  .coupon-standalone {
    padding: 15px;
  }
}

/* ===================== Utility Classes ===================== */
/* Smooth transitions */
.socket-overlay * {
  transition: opacity 0.3s ease;
}

/* Force hardware acceleration */
.socket-content-wrapper {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Print styles */
@media print {
  .socket-overlay,
  .socket-status,
  .socket-countdown {
    display: none !important;
  }
}

.player-fixed-logo {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60px;
  pointer-events: auto;
  z-index: 999;
}

@media (max-width: 768px) {
  .player-fixed-logo {
    width: 40px;
    top: 8px;
    right: 8px;
  }
}

/* =====================================================
   SIMPLE FULLSCREEN CSS
   ===================================================== */

/* Fullscreen wrapper for desktop only */
#fullscreen-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999 !important;
  overflow: hidden;
}

/* When fullscreen is active */
#fullscreen-wrapper.active {
  display: flex !important;
}

/* Video container in fullscreen */
#fullscreen-wrapper .vdo-container {
  width: 100% !important;
  height: 100% !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Video/Media elements scaling */
#fullscreen-wrapper video,
#fullscreen-wrapper iframe,
#fullscreen-wrapper media-player {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Socket overlay in fullscreen - ใช้ flexbox เช่นกัน */
#fullscreen-wrapper #socketOverlay,
#fullscreen-wrapper .socket-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 999998 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Socket overlay interactive elements */
#fullscreen-wrapper .socket-message,
#fullscreen-wrapper .socket-content-wrapper,
#fullscreen-wrapper .clickable {
  pointer-events: auto !important;
}

/* Fullscreen button */
#fullscreen-toggle-btn {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  padding: 8px 12px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: white !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: 20px !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  transition: all 0.3s ease !important;
}

#fullscreen-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  transform: scale(1.05) !important;
}

/* Logo in fullscreen */
#fullscreen-wrapper img[alt="Logo"] {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 80px !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
}

/* Mobile native fullscreen styles */
@media (max-width: 768px) {
  /* Hide custom fullscreen button on mobile */
  #fullscreen-toggle-btn {
    display: none !important;
  }

  /* When in native fullscreen on mobile */
  .vdo-container:fullscreen {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .vdo-container:fullscreen video,
  .vdo-container:fullscreen iframe,
  .vdo-container:fullscreen media-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Socket overlay in native fullscreen - ใช้ flexbox */
  .vdo-container:fullscreen #socketOverlay,
  .vdo-container:fullscreen .socket-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999998;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .vdo-container:fullscreen .socket-message,
  .vdo-container:fullscreen .socket-content-wrapper {
    pointer-events: auto;
  }

  /* Webkit specific */
  .vdo-container:-webkit-full-screen {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .vdo-container:-webkit-full-screen video,
  .vdo-container:-webkit-full-screen iframe,
  .vdo-container:-webkit-full-screen media-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .vdo-container:-webkit-full-screen #socketOverlay,
  .vdo-container:-webkit-full-screen .socket-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999998;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .vdo-container:-webkit-full-screen .socket-message,
  .vdo-container:-webkit-full-screen .socket-content-wrapper {
    pointer-events: auto;
  }
}

/* Hide scrollbars in fullscreen */
#fullscreen-wrapper::-webkit-scrollbar {
  display: none;
}

#fullscreen-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Smooth transitions */
#fullscreen-wrapper * {
  transition: opacity 0.3s ease;
}