/* Sticky 3D Button - Hidden but Visible */
.sticky-show-btn {
    position: fixed;
    top: 50%; /* Center vertically */
    left: 0; /* Stick to the left edge */
    transform: translateY(-50%); /* Center alignment */
    background: #353535b3; /* Semi-transparent dark background */
    color: #fff; /* White text */
    padding: 20px 10px; /* Vertical padding for a tall strip */
    border-radius: 0 12px 12px 0; /* Rounded right corners */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2); /* Shadow on the right side */
    transition: all 0.3s ease;
    z-index: 1000;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Segoe UI', sans-serif;
    writing-mode: vertical-lr; /* Vertical text */
    text-orientation: mixed; /* Ensure text is readable */
    opacity: 0.9;
}

.sticky-show-btn:hover {
    background: #555555e6; /* Darker on hover */
    padding: 20px 15px; /* Slightly wider on hover */
    opacity: 1;
    box-shadow: 6px 0 15px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}
/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Darker overlay for better focus */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(8px); /* Blur effect for the background */
}

[data-modal-type="uptime"] .modal-content {
    width: 90%;
    max-width: 1200px; /* Limit maximum width */
    height: 80vh;
    background: #2c2c2c; /* Dark gray background for the modal */
    border-radius: 15px; /* Smoother corners */
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); /* Stronger shadow for depth */
}

.modal iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Close Button Styles */
[data-modal-type="uptime"] .close-btn {
    position: absolute;
    top: 20px; /* Adjusted for better positioning */
    left: 20px; /* Positioned on the left */
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    background: #555555e6; /* A vibrant red color */
    border: 2px solid #fff; /* White border for contrast */
    border-radius: 50%;
    width: 40px; /* Fixed width */
    height: 40px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
}

.close-btn:hover {
    background: #ff6b81; /* Lighter red on hover */
    transform: scale(1.1) rotate(90deg); /* Slightly scale up and rotate */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

/* Full Screen Button Styles */
[data-modal-type="uptime"] .fullscreen-btn {
    position: absolute;
    top: 80px; /* Positioned below the close button */
    left: 20px; /* Aligned with the close button */
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    background: #353535b3; /* Matching the button color */
    border: 2px solid #fff; /* White border for contrast */
    border-radius: 50%;
    width: 40px; /* Fixed width */
    height: 40px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
}

.fullscreen-btn:hover {
    background: #555555e6; /* Darker gray on hover */
    transform: scale(1.1); /* Slightly scale up */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}


/* floating button store */

.floating-store-button {
  position: fixed;
  bottom: 160px;
  right: 20px;
  z-index: 9999;
}

.floating-store-button button {
  background: linear-gradient(135deg, #502143, #843f7d); /* ZendaCloud brand gradient */
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(80, 33, 67, 0.35); /* Richer shadow */
  transition: all 0.3s ease;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-store-button button:hover {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 8px 24px rgba(80, 33, 67, 0.5);
}

.floating-store-button img {
  width: 24px;
  height: 24px;
  filter: brightness(1.2); /* Makes white icon pop more */
}


/* Custom Tooltip for button store */
.tooltip-store {
  position: absolute;
  bottom: 130%;
  right: 50%;
  transform: translateX(30%);
  background-color: #502143;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 13px;
  font-family: 'Segoe UI', sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10000;
}

.shop-btn:hover .tooltip-store {
  opacity: 1;
}


/* Mobile-specific styles for sticky button */
@media screen and (max-width: 768px) {
    .sticky-show-btn {
        padding: 15px 8px; /* Smaller padding for a compact strip */
        font-size: 12px; /* Smaller font size */
        border-radius: 0 8px 8px 0; /* Smaller rounded corners */
        box-shadow: 3px 0 8px rgba(0, 0, 0, 0.2); /* Lighter shadow */
    }

    .sticky-show-btn:hover {
        padding: 15px 10px; /* Adjusted hover padding */
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3); /* Slightly lighter hover shadow */
    }
}


/* RTL (Right-to-Left) Styles */
[dir="rtl"] .sticky-show-btn {
    left: auto; /* Reset left position */
    right: 20px; /* Move to the right side */
}

[dir="rtl"] .close-btn {
    right: auto; /* Reset right position */
    left: 20px; /* Move to the left side */
}

[dir="rtl"] .fullscreen-btn {
    right: auto; /* Reset right position */
    left: 20px; /* Move to the left side */
}