/* passport-js/styles.css - Main Stylesheet */

body {
  background: linear-gradient(
    45deg,
    rgba(120, 163, 139, 0.25),
    rgba(46, 67, 94, 0.25),
    rgba(22, 39, 59, 0.25)
  );
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.top-bar-gradient {
  background: linear-gradient(
    45deg,
    rgba(120, 163, 139, 0.25),
    rgba(58, 81, 110, 0.25),
    rgba(33, 55, 80, 0.25)
  );
}

.avatar-gradient {
  background: linear-gradient(135deg, rgb(72, 97, 91), rgb(120, 163, 139));
}

.card-glass {
  background: rgba(80, 112, 115, 0.175);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.warning-glass {
  background: rgba(239, 68, 68, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.btn-primary-gradient {
  background: linear-gradient(
    to bottom right,
    rgb(72, 97, 91),
    rgb(55, 65, 81)
  ) !important;
}

.popup-glass {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.pubkey-display {
  direction: rtl;
  transition: max-width 0.3s ease, color 0.2s ease;
}

.pubkey-display:hover {
  max-width: 1000px;
  z-index: 10;
  position: relative;
}

.popup-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.info-section {
  background: rgba(255, 255, 255, 0.4);
  border-left: 4px solid rgba(72, 97, 91, 0.6);
}

.checkbox-container {
  background: rgba(255, 255, 255, 0.4);
}

.checkbox-container:hover {
  background: rgba(255, 255, 255, 0.6);
}

.input-field,
textarea {
  background: rgba(255, 255, 255, 0.675);
}

.output-box {
  background: rgba(245, 245, 245, 0.8);
  border-left: 4px solid rgba(72, 97, 91, 0.6);
}

.output-box.success {
  border-left-color: #10b981;
  background: rgba(236, 253, 245, 0.8);
}

.output-box.error {
  border-left-color: #ef4444;
  background: rgba(254, 242, 242, 0.8);
}

.svg-gradient-overlay {
  filter: brightness(0) saturate(100%) invert(32%) sepia(12%) saturate(1200%)
    hue-rotate(121deg) brightness(92%) contrast(90%);
}

/* App visibility control */
#app {
  display: none !important;
  visibility: hidden !important;
}

#app.unlocked {
  display: block !important;
  visibility: visible !important;
}

#app.ready {
  display: block !important;
  visibility: visible !important;
}

/* Burger menu hover effect */
#burgerButton:hover .w-5 > div {
  background-color: #374151;
}

/* Burger menu animation when sidebar open */
#burgerButton.sidebar-open .w-5 > div:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

#burgerButton.sidebar-open .w-5 > div:nth-child(2) {
  opacity: 0;
}

#burgerButton.sidebar-open .w-5 > div:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Sidebar scrollbar */
#sidebar {
  overflow-y: auto;
}

#sidebar::-webkit-scrollbar {
  width: 8px;
}

#sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

#sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Lock button hover effect */
.lock-button .lock-icon {
  transition: transform 0.2s ease;
}

.lock-button:hover .lock-icon {
  transform: scale(1.1);
}