/* General body styling */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "proxima-nova-soft", sans-serif;
  -webkit-user-select: none;
  overflow: hidden;
  background: #2c2d44;
}

/* Centering the vertical box and its content */
body .vertical-centered-box {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}
body .vertical-centered-box:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
body .vertical-centered-box .content {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  font-size: 0;
}

/* Loader styles */
.loader-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  margin-left: -60px;
  margin-top: -60px;
}
.loader-line-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  overflow: hidden;
  transform-origin: 60px 60px;
  -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
  animation: rotate 1.2s infinite linear;
}
.loader-line-mask .loader-line {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Background styling */
#particles-background,
#particles-foreground {
  left: -51%;
  top: -51%;
  width: 202%;
  height: 202%;
  transform: scale3d(0.5, 0.5, 1);
}
#particles-background {
  background: #2c2d44;
  background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
}

/* Animation keyframes */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Style for form labels on the encrypter page */
#cryptoForm label {
  color: white;
  font-family: 'Suez One', sans-serif;
  font-size: 18px;
}

/* Style for the result label (Encrypted Text / Decrypted Text) */
.result-label {
  color: white; /* Set the color to white for better readability */
  font-family: 'Suez One', sans-serif;
  font-size: 24px; /* Slightly reduce the size to make it distinct from the result */
  font-weight: normal; /* Set to normal weight to reduce the thickness */
  margin-top: 20px; /* Increase the space above the label */
  text-align: left; /* Align text to the left */
}

/* Style for the actual result text */
#result-text {
  color: #ffcc00; /* Use a different color to make the result text stand out */
  font-family: 'Suez One', sans-serif;
  font-size: 24px; /* Make the result text slightly larger */
  font-weight: normal; /* Ensure the result text is not bold */
  text-align: left;
  margin-top: 5px;
  line-height: 1.5;
  user-select: text; /* Enable text selection */
  cursor: text; /* Change the cursor to text selection when hovering over the result */
}

/* Style for the Back to Scar's Hideout button */
.back-button {
  color: white;
  background-color: #ff5722;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 8px;
  font-family: 'Suez One', sans-serif;
  font-size: 18px;
  display: inline-block;
  margin-top: 50px; /* Increase space above the Back to Scar's Hideout button */
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #e64a19; /* Darken the button color on hover */
}

/* Style for the Encrypt and Decrypt buttons */
input[type="button"] {
  margin-right: 10px; /* Space between the buttons */
  margin-top: 15px; /* Space above the buttons */
}

/* CSS for the floating Encrypter button */
.floating-button {
  position: fixed;
  left: 20%;
  top: 10%;
  transform: translateY(-50%);
  background-color: #ff5722;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  font-family: 'Suez One', sans-serif;
  font-size: 18px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.floating-button:hover {
  background-color: #e64a19;
}

/* Position the LogComp button next to Encrypter */
@media (max-width: 768px) {
  /* Stack nicely on smaller screens */
  }

/* === Consistent back button + content offset (added by LogComp setup) === */
.back-button--fixed{
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 1001;
  margin: 0 !important;
}

.page-offset-top{
  padding-top: 72px; /* keeps content clear of the fixed back button */
}

/* === Grouped CTA buttons bar (centered) === */
.buttons-bar{
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 12px;
  z-index: 1000;
}

/* Keep global .floating-button as-is, but inside the bar we reset to static */
.buttons-bar .floating-button{
  position: static;
}

/* Mobile: stack vertically and nudge a bit lower */
@media (max-width: 768px){
  .buttons-bar{
    top: 18%;
    flex-direction: column;
    transform: translate(-50%, -50%);
  }
}