/* CSS with enlarged plate.png (increased by 50px on each side) */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  font-family: Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center all content horizontally */
  margin: 0;
  padding: 0;
  position: relative; /* For absolute positioning of the side boxes */
}

/* Header styling with spacing and centering - ADJUSTED HEIGHT & SPACING */
.header {
  text-align: center;
  padding-top: 25px; /* เพิ่มจาก 15px */
  padding-bottom: 10px; /* เพิ่มจาก 5px */
  background-color: #f8f9fa;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  margin-bottom: 200px; /* เพิ่มจาก 150px เป็น 200px */
}

/* Header text styling */
h1 {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 5px 0; /* Add specific margin only to bottom */
}

h2 {
  font-size: 22px;
  font-weight: normal;
  margin: 0 0 10px 0; /* เพิ่มระยะห่างด้านล่างจาก 5px เป็น 10px */
}

/* Center point marker */
.center-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Toggle button styling */
.toggle-button {
  position: fixed;
  padding: 10px 15px;
  background-color: #4169e1; /* Royal Blue */
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 100;
  transition: all 0.3s ease;
}

#toggle-numbers {
  bottom: 100px; /* Moved up to avoid overlap with footer */
  right: 30px;
}

.toggle-points-button {
  bottom: 160px; /* Position above the toggle-numbers button */
  right: 30px;
  background-color: #2e8b57; /* Sea green color */
}

.toggle-button:hover {
  background-color: #1e3a8a; /* Darker blue on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.toggle-points-button:hover {
  background-color: #1a5e3a; /* Darker green on hover */
}

.toggle-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

/* Side boxes styling - ADJUSTED POSITIONING */
.left-box {
  position: fixed;
  left: 20px;
  top: 230px; /* เพิ่มจาก 200px เป็น 230px */
  width: 180px;
  padding: 15px;
  border: 2px solid #2e8b57; /* Sea green border */
  background-color: #e6ffec; /* Light green background */
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 10;
}

/* Right box styling */
.right-box {
    position: fixed;
    right: 20px;
    top: 230px;
    width: 250px;
    height: auto;
    min-height: 220px; /* ลดลงเพราะไม่มี Uranian buttons */
    padding: 15px;
    padding-bottom: 20px;
    z-index: 10;
    background-color: #fff9c4; /* สีเหลืองอ่อน Lighten Yellow */
    border: 1px solid #f9a825; /* เส้นขอบสีเหลืองเข้มเล็กน้อย */
    border-radius: 8px; /* มุมมนเล็กน้อย */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* เงาเบาๆ */
}

/* Make sure the right-box buttons are properly spaced within the box */
.right-box .button-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
}

.right-box .action-button {
    margin: 0;
    display: inline-block;
    flex-grow: 1;
    max-width: 120px;
}

/* Add more space between the file upload sections */
.file-upload-container {
    margin: 10px 0;
    position: relative;
    display: block;
}

@media (max-width: 1100px) {
    .right-box {
        position: static;
        margin: 10px auto;
        width: 90%;
        max-width: 300px;
    }
}

.left-box h3 {
  margin-bottom: 10px;
  color: #2e8b57;
}

.left-box p, .right-box p {
  margin: 5px 0;
  font-size: 16px;
}

/* Position value styling */
#position-value {
  margin-top: 10px;
  padding: 5px 8px;
  background-color: rgba(46, 139, 87, 0.1);
  border-radius: 4px;
  font-weight: bold;
  color: #2e8b57;
  border-left: 3px solid #2e8b57;
}

/* File upload styling */
.file-upload-container {
  margin: 15px 0;
  display: flex;
  justify-content: center;
}

.file-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.file-input-label {
  background-color: #ff6347; /* Tomato color */
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  transition: all 0.3s ease;
  font-size: 14px;
  text-align: center;
}

.file-input-label:hover {
  background-color: #d04836; /* Darker tomato on hover */
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.file-input-label:active {
  transform: translateY(0);
}

.points-info {
  margin-top: 10px;
  padding: 5px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.action-button {
  margin: 10px 5px;
  padding: 8px 12px;
  background-color: #4a86e8;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

#plot-images-button {
  background-color: #6aa84f; /* Green color */
}

#hide-images-button {
  background-color: #cc0000; /* Red color */
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.action-button:active {
  transform: translateY(0);
}

/* Main container for the zodiac circle */
.container {
  position: relative;
  width: 100%;
  max-width: 700px; /* Adjusted maximum width */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  margin: 0 auto; /* Center container */
  margin-top: 50px; /* เพิ่มระยะห่างด้านบนของ container */
  margin-bottom: 70px; /* เพิ่มระยะห่างด้านล่างของ container */
}

/* Plot points container and styling */
.plot-points-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  display: block;
}

.plot-point {
  position: absolute;
  width: 10px; /* Smaller dot size */
  height: 10px; /* Smaller dot size */
  background-color: #ff4500; /* Orange-red */
  border: 2px solid white;
  border-radius: 50%;
  transform-origin: center center;
  top: 50%;
  left: 50%;
  z-index: 5;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
  transition: transform 0.2s ease;
}

.plot-point:hover {
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 6;
  background-color: #ff7f50; /* Coral - lighter color on hover */
}

/* Image points styling */
.image-point-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 15; /* Increased z-index to be on top of everything */
  pointer-events: none;
}

.image-point {
  position: absolute;
  width: 30px; /* Fixed size of 30px */
  height: 30px; /* Fixed size of 30px */
  transform-origin: center;
  top: 50%;
  left: 50%;
  z-index: 16; /* Ensure it's above other elements */
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
  /* Removed box-shadow to hide frame */
}

.point-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* Ensure entire image is visible */
}

.image-point:hover {
  transform: translate(-50%, -50%) scale(1.5);
  z-index: 17;
}

/* Footer styling */
.footer {
  text-align: center;
  padding: 20px;
  margin-top: auto;
  width: 100%;
  background-color: #f8f9fa;
  margin-top: 200px; /* เพิ่มจาก 150px เป็น 200px */
  position: relative; /* Ensure it sits on top of other elements */
  z-index: 20; /* Higher z-index to prevent being covered */
}

/* Shared positioning for all centered elements */
.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Zodiac background image - ADJUSTED SIZE */
#zodiac_img {
  width: 580px; /* Keeping same size */
  height: 580px; /* Keeping same size */
  z-index: 1;
}

/* Color wheel - ADJUSTED SIZE */
.circle_12color {
  width: 440px; /* Adjusted size */
  height: 440px; /* Adjusted size */
  border-radius: 50%;
  background: conic-gradient(
    #ff0000 0% 8.33%, 
    #ff7f00 8.33% 16.66%, 
    #0000ff 16.66% 25%,
    #ffff00 25% 33.33%,
    #0000ff 33.33% 41.66%, 
    #ff7f00 41.66% 50%, 
    #00ff00 50% 58.33%, 
    #ffff00 58.33% 66.66%, 
    #ff6347 66.66% 75%, 
    #ff7f00 75% 83.33%, 
    #00ff00 83.33% 91.66%, 
    #ffff00 91.66% 100%
  );
  z-index: 2;
}

/* Pointer image - INCREASED SIZE BY 100px (50px each side) */
.pointer-container {
  width: 400px; /* Increased from 300px to 400px (+100px) */
  height: 400px; /* Increased from 300px to 400px (+100px) */
  z-index: 3;
  border-radius: 50%;
  overflow: hidden;
}

#pointer {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  display: block;
  border-radius: 50%;
  transition: transform 0.2s ease; /* Add transition for smoother rotation */
}

/* Number styling for house images - ADJUSTED FOR 15px GAP */
.number-container {
  position: absolute;
  width: 610px; /* Zodiac img width + 30px (15px gap on each side) */
  height: 610px; /* Zodiac img height + 30px (15px gap on each side) */
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  --R: 305px; /* Half of container width/height */
  display: block;
  transition: opacity 0.3s ease;
}

.number {
  position: absolute;
  color: transparent; /* Hide text color */
  font-weight: bold;
  font-size: 0; /* Remove font size for images */
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 4;
  background-color: transparent; /* Remove white background */
  border-radius: 0; /* Remove circular border */
  top: 50%;
  left: 50%;
  overflow: visible; /* Allow images to be fully visible */
}

/* House image styling within number elements */
.number img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Calculate positions - Already in counter-clockwise order (1 at top, then going counter-clockwise) */

/* House 1 (AriH.png) - 12 o'clock position - 90 degrees */
.number[data-position="1"] {
  transform: translate(-50%, -50%) translateY(calc(-1 * var(--R)));
}

/* House 2 (TauH.png) - 11 o'clock position - 120 degrees */
.number[data-position="2"] {
  transform: translate(-50%, -50%) translate(calc(var(--R) * -0.5), calc(var(--R) * -0.866));
}

/* House 3 (GemH.png) - 10 o'clock position - 150 degrees */
.number[data-position="3"] {
  transform: translate(-50%, -50%) translate(calc(var(--R) * -0.866), calc(var(--R) * -0.5));
}

/* House 4 (CanH.png) - 9 o'clock position - 180 degrees */
.number[data-position="4"] {
  transform: translate(-50%, -50%) translateX(calc(-1 * var(--R)));
}

/* House 5 (LeoH.png) - 8 o'clock position - 210 degrees */
.number[data-position="5"] {
  transform: translate(-50%, -50%) translate(calc(var(--R) * -0.866), calc(var(--R) * 0.5));
}

/* House 6 (VirH.png) - 7 o'clock position - 240 degrees */
.number[data-position="6"] {
  transform: translate(-50%, -50%) translate(calc(var(--R) * -0.5), calc(var(--R) * 0.866));
}

/* House 7 (LibH.png) - 6 o'clock position - 270 degrees */
.number[data-position="7"] {
  transform: translate(-50%, -50%) translateY(var(--R));
}

/* House 8 (ScoH.png) - 5 o'clock position - 300 degrees */
.number[data-position="8"] {
  transform: translate(-50%, -50%) translate(calc(var(--R) * 0.5), calc(var(--R) * 0.866));
}

/* House 9 (SagH.png) - 4 o'clock position - 330 degrees */
.number[data-position="9"] {
  transform: translate(-50%, -50%) translate(calc(var(--R) * 0.866), calc(var(--R) * 0.5));
}

/* House 10 (CapH.png) - 3 o'clock position - 0 degrees */
.number[data-position="10"] {
  transform: translate(-50%, -50%) translateX(var(--R));
}

/* House 11 (PisH.png) - 2 o'clock position - 30 degrees */
.number[data-position="11"] {
  transform: translate(-50%, -50%) translate(calc(var(--R) * 0.866), calc(var(--R) * -0.5));
}

/* House 12 (AquH.png) - 1 o'clock position - 60 degrees */
.number[data-position="12"] {
  transform: translate(-50%, -50%) translate(calc(var(--R) * 0.5), calc(var(--R) * -0.866));
}

/* Space for content to prevent overlapping */
.content-spacer {
  width: 100%;
  height: 40px; /* Reduced space between elements */
}

/* Media query adjustments for smaller screens */
@media (max-width: 1100px) {
  .left-box, .right-box {
    position: static;
    margin: 10px auto;
    width: 90%;
    max-width: 300px;
  }
  
  .toggle-button {
    padding: 8px 12px;
    font-size: 14px;
  }

  #toggle-numbers {
    bottom: 80px;
    right: 10px;
  }
  
  .toggle-points-button {
    bottom: 130px;
    right: 10px;
  }
  
  /* Responsive adjustments for the zodiac components */
  #zodiac_img {
    width: 90vw;
    height: 90vw;
    max-width: 500px;
    max-height: 500px;
  }
  
  .circle_12color {
    width: 80vw;
    height: 80vw;
    max-width: 400px;
    max-height: 400px;
  }
  
  /* Also update the pointer container size in responsive view */
  .pointer-container {
    width: 70vw;
    height: 70vw;
    max-width: 400px; /* Increased from 300px to 400px */
    max-height: 400px; /* Increased from 300px to 400px */
  }
  
  .number-container {
    width: calc(90vw + 30px); /* 15px gap on each side */
    height: calc(90vw + 30px); /* 15px gap on each side */
    max-width: 530px; /* 500px + 30px */
    max-height: 530px; /* 500px + 30px */
    --R: calc((90vw + 30px) / 2);
  }
}

/* Uranian results box styling - ขยายใหญ่ขึ้นสำหรับข้อความยาว */
.uranian-results {
  position: fixed;
  left: 20px;
  top: 230px; /* ย้ายขึ้นมาแทนที่ left-box */
  width: 280px; /* ขยายจาก 180px เป็น 400px */
  margin: 0;
  padding: 15px;
  background-color: #f0f8ff; /* Light blue background */
  border: 2px solid #4682b4; /* Steel blue border */
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 10;
  max-height: calc(100vh - 230px - 100px);
  overflow-y: auto;
}

.uranian-results h3 {
  margin-bottom: 10px;
  color: #2e5090; /* Dark blue color */
  text-align: center;
  font-size: 14px;
}

.uranian-results .result-content {
  background-color: #e6f3ff; /* Lighter blue for content */
  font-family: monospace;
  white-space: pre-wrap;
  padding: 10px;
  border-radius: 4px;
  font-size: 11px; /* ลดขนาดฟอนต์เล็กน้อยเพื่อให้พอดีกับข้อความยาว */
  overflow-y: auto;
  overflow-x: auto; /* เพิ่ม horizontal scroll สำหรับข้อความที่ยาวมาก */
  max-height: 100%;
}

/* Update toggle button positions - ลบ toggle-uranian-button */
#toggle-color-wheel {
  bottom: 280px; /* ย้ายขึ้นมาเป็นปุ่มบนสุด */
  right: 30px;
  background-color: #9c27b0; /* Purple color */
}

#toggle-color-wheel:hover {
  background-color: #7b1fa2; /* Darker purple on hover */
}

.toggle-planets-button {
  bottom: 220px; /* Keep existing position */
  right: 30px;
  background-color: #ff6b35; /* Orange color to match planets */
}

.toggle-planets-button:hover {
  background-color: #e55a2b; /* Darker orange on hover */
}

.toggle-points-button {
  bottom: 160px; /* Keep existing position */
  right: 30px;
  background-color: #2e8b57; /* Sea green color */
}

#toggle-numbers {
  bottom: 100px; /* Keep existing position */
  right: 30px;
}

/* Planet points container and styling */
.planet-points-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 20; /* Higher than plot points but lower than images */
  display: block;
  pointer-events: none; /* Allow clicks to pass through container */
}

.planet-point {
  position: absolute;
  width: 24px; /* Larger size for images */
  height: 24px; /* Larger size for images */
  transform-origin: center center;
  top: 50%;
  left: 50%;
  z-index: 20;
  cursor: pointer;
  transition: transform 0.2s ease;
  pointer-events: auto; /* Allow clicks on individual points */
}

.planet-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* Ensure entire image is visible */
}

/* Uranian points container and styling */
.uranian-points-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 25; /* Higher than planets but lower than images */
  display: block;
  pointer-events: none; /* Allow clicks to pass through container */
}

.uranian-point {
  position: absolute;
  width: 20px; /* Different size from planets */
  height: 20px;
  transform-origin: center center;
  top: 50%;
  left: 50%;
  z-index: 25;
  cursor: pointer;
  transition: transform 0.2s ease;
  pointer-events: auto; /* Allow clicks on individual points */
}

.uranian-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Responsive adjustments for uranian elements */
@media (max-width: 1100px) {
  .uranian-results {
    position: static;
    margin: 10px auto;
    width: 80%;
    max-width: 300px; /* Keep wider width for mobile too */
    max-height: 300px;
  }
  
  #toggle-color-wheel {
    bottom: 240px;
    right: 10px;
  }
  
  .toggle-planets-button {
    bottom: 190px;
    right: 10px;
  }
  
  .toggle-points-button {
    bottom: 130px;
    right: 10px;
  }
  
  #toggle-numbers {
    bottom: 80px;
    right: 10px;
  }
}
/* เพิ่มส่วนนี้ลงใน ctbox12.css หรือสร้างไฟล์ใหม่แล้ว import */

/* โครงสร้างหลัก 3 คอลัมน์ */
.main-layout {
  display: flex;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  gap: 20px;
}

/* คอลัมน์ซ้าย - แผงควบคุม */
.left-control-panel {
  flex: 0 0 300px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border: 1px solid #e9ecef;
  height: fit-content;
}

/* คอลัมน์กลาง - วงจักรราศี */
.center-content {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* คอลัมน์ขวา - ข้อมูล Uranian */
.right-uranian-panel {
  flex: 0 0 350px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border: 1px solid #e9ecef;
  height: fit-content;
}

/* ปรับการแสดงผลของ container วงจักรราศี */
.container {
  margin: 0 !important;
  width: 100%;
  max-width: 700px;
}

/* ปรับส่วนหัวให้อยู่เหนือคอลัมน์ */
.header {
  width: 100%;
  margin-bottom: 20px !important;
}

/* ซ่อนองค์ประกอบที่ไม่จำเป็น */
.left-box, .right-box, .toggle-button, .toggle-points-button, 
.toggle-planets-button, .floating-controls {
  display: none !important;
}

/* ปรับการแสดงผลของ Uranian results */
.uranian-results {
  position: static !important;
  width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
}

/* Responsive design สำหรับหน้าจอเล็ก */
@media (max-width: 1024px) {
  .main-layout {
    flex-direction: column;
    padding: 15px;
  }
  
  .left-control-panel, .right-uranian-panel {
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 20px;
  }
  
  .container {
    margin-bottom: 20px !important;
  }
}

/* ปรับปรุงการแสดงผลไฟล์อัปโหลด */
.file-upload-group {
  margin-bottom: 15px;
}

.file-upload-label-modern {
  display: block;
  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 500;
  border: none;
  width: 100%;
  margin-bottom: 8px;
}

.file-upload-label-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  background: linear-gradient(45deg, #ff5252, #ff7043);
}

.file-upload-label-modern.planet {
  background: linear-gradient(45deg, #4fc3f7, #29b6f6);
}

.file-upload-label-modern.planet:hover {
  background: linear-gradient(45deg, #03a9f4, #0288d1);
  box-shadow: 0 4px 15px rgba(79, 195, 247, 0.3);
}

.file-upload-label-modern.uranian {
  background: linear-gradient(45deg, #ba68c8, #ab47bc);
}

.file-upload-label-modern.uranian:hover {
  background: linear-gradient(45deg, #9c27b0, #8e24aa);
  box-shadow: 0 4px 15px rgba(186, 104, 200, 0.3);
}

/* ปุ่มควบคุม */
.control-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.control-btn {
  flex: 1;
  min-width: 80px;
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-show {
  background: linear-gradient(45deg, #4caf50, #66bb6a);
  color: white;
}

.btn-hide {
  background: linear-gradient(45deg, #f44336, #ef5350);
  color: white;
}

.control-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* พิกัด */
.coordinates-display {
  background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #c8e6c9;
}

.coord-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.95em;
}

.coord-label {
  font-weight: 500;
  color: #2e7d32;
}

.coord-value {
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #a5d6a7;
  font-family: monospace;
  color: #1b5e20;
}

/* ข้อมูล Uranian */
.uranian-display {
  background: linear-gradient(135deg, #e3f2fd, #f0f7ff);
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #bbdefb;
  height: calc(100% - 60px);
  overflow-y: auto;
}

.uranian-content {
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
  color: #0d47a1;
  white-space: pre-wrap;
}

/* สถานะระบบ */
.status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 8px;
  background: #dc3545;
}

.status-indicator.active {
  background: #28a745;
}
/* Enhanced CSS additions for movetouch feature - เพิ่มในไฟล์ ctbox.css */

/* Star info tooltip สำหรับ movetouch feature */
#star-info-tooltip {
    position: fixed;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid #4a9eff;
    z-index: 1000;
    display: none;
    max-width: 280px;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.2s ease-in-out;
    pointer-events: none;
    line-height: 1.4;
}

#star-info-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #4a9eff;
}

/* Enhanced plot points with hover effects for movetouch */
.plot-point {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ff4500;
    border: 2px solid white;
    border-radius: 50%;
    transform-origin: center center;
    top: 50%;
    left: 50%;
    z-index: 5;
    cursor: pointer;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.plot-point:hover {
    transform: translate(-50%, -50%) scale(1.5);
    z-index: 6;
    background-color: #ff7f50;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.6);
}

/* Enhanced image points with hover effects */
.image-point {
    position: absolute;
    width: 30px;
    height: 30px;
    transform-origin: center;
    top: 50%;
    left: 50%;
    z-index: 16;
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
    overflow: hidden;
}

.image-point:hover {
    transform: translate(-50%, -50%) scale(1.4);
    z-index: 17;
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.8);
    filter: brightness(1.2);
}

.point-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* Enhanced planet points with hover effects */
.planet-point {
    position: absolute;
    width: 24px;
    height: 24px;
    transform-origin: center center;
    top: 50%;
    left: 50%;
    z-index: 20;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    border-radius: 50%;
    overflow: hidden;
}

.planet-point:hover {
    transform: translate(-50%, -50%) scale(1.3);
    z-index: 21;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.8);
    filter: brightness(1.3);
}

.planet-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* Enhanced uranian points with hover effects */
.uranian-point {
    position: absolute;
    width: 20px;
    height: 20px;
    transform-origin: center center;
    top: 50%;
    left: 50%;
    z-index: 25;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    border-radius: 50%;
    overflow: hidden;
}

.uranian-point:hover {
    transform: translate(-50%, -50%) scale(1.4);
    z-index: 26;
    box-shadow: 0 0 10px rgba(186, 104, 200, 0.8);
    filter: brightness(1.2);
}

.uranian-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: filter 0.3s ease;
}

/* Toggle movetouch button styling */
.btn-toggle-movetouch {
    background: linear-gradient(45deg, #ff9800, #ffb74d);
    color: white;
    width: 100%;
    margin-top: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-toggle-movetouch::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-toggle-movetouch:hover::before {
    left: 100%;
}

.btn-toggle-movetouch.active {
    background: linear-gradient(45deg, #4caf50, #66bb6a);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}

.btn-toggle-movetouch:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn-toggle-movetouch.active:hover {
    box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
}

/* Animation for tooltip appearance */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-10px) scale(0.9);
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeOut {
    from { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
    to { 
        opacity: 0; 
        transform: translateY(-10px) scale(0.9);
    }
}

/* Pulse animation for highlighted stars */
@keyframes pulse {
    0% { box-shadow: 0 0 5px rgba(74, 158, 255, 0.5); }
    50% { box-shadow: 0 0 20px rgba(74, 158, 255, 0.8); }
    100% { box-shadow: 0 0 5px rgba(74, 158, 255, 0.5); }
}

/* Special effects for movetouch highlights */
.movetouch-highlight {
    animation: pulse 1.5s infinite;
    filter: brightness(1.5) drop-shadow(0 0 10px #4a9eff);
    z-index: 100 !important;
}

/* Tooltip content styling */
.tooltip-star-name {
    font-weight: bold;
    color: #4a9eff;
    margin-bottom: 4px;
    font-size: 13px;
}

.tooltip-position {
    color: #ffc107;
    font-weight: 500;
}

.tooltip-sign {
    color: #28a745;
}

.tooltip-house {
    color: #dc3545;
}

.tooltip-details {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(74, 158, 255, 0.3);
    font-size: 11px;
    color: #b3d9ff;
}

/* Responsive adjustments for movetouch */
@media (max-width: 1024px) {
    #star-info-tooltip {
        font-size: 11px;
        padding: 10px 12px;
        max-width: 200px;
    }
    
    .plot-point:hover,
    .image-point:hover,
    .planet-point:hover,
    .uranian-point:hover {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@media (max-width: 768px) {
    #star-info-tooltip {
        font-size: 10px;
        padding: 8px 10px;
        max-width: 180px;
    }
    
    .btn-toggle-movetouch {
        font-size: 0.8em;
        padding: 8px 12px;
    }
}

/* Dark mode support for movetouch (if needed) */
@media (prefers-color-scheme: dark) {
    #star-info-tooltip {
        background: linear-gradient(135deg, #0d1117, #161b22);
        border-color: #30363d;
        color: #f0f6fc;
    }
    
    #star-info-tooltip::before {
        border-bottom-color: #30363d;
    }
}

/* Loading state for movetouch */
.movetouch-loading {
    position: relative;
}

.movetouch-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #4a9eff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Help tooltip for movetouch */
#movetouch-help {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Status indicators enhancement */
.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
    background: #dc3545;
    transition: all 0.3s ease;
}

.status-indicator.active {
    background: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

.status-indicator.movetouch-active {
    background: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); }
    50% { box-shadow: 0 0 15px rgba(0, 123, 255, 0.8); }
    100% { box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); }
}