/* ============================================================
   LiveDOOH Update Server — Custom Styles
   Works alongside Tailwind for visual polish & personality.
   ============================================================ */

/* --- Base & body --- */
body {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 50%, #e8edf5 100%);
  min-height: 100vh;
}

/* --- Navbar --- */
.nav-bar {
  background: linear-gradient(135deg, #0d5796 0%, #0a68b5 50%, #0d82e0 100%);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(10, 104, 181, 0.25);
}

.nav-bar a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

.nav-logo {
  transition: transform 0.2s ease;
}

.nav-logo:hover {
  transform: scale(1.03);
}

/* --- Cards --- */
.card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 231, 235, 0.8);
  border-radius: 1rem;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

/* --- Download button (legacy — used on dashboard) --- */
.download-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

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

.download-btn:active {
  transform: translateY(0);
}

/* --- 3D Download button (install page) --- */
.download-btn-3d {
  position: relative;
  display: block;
  overflow: hidden;
  border: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: 1rem;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.download-btn-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%, rgba(0, 0, 0, 0.08) 100%);
  border-radius: inherit;
  pointer-events: none;
}

.download-btn-3d:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.25),
    0 12px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.download-btn-3d:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.download-btn-3d-win {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
}

.download-btn-3d-linux {
  background: linear-gradient(135deg, #E95420 0%, #77216F 50%, #5E2750 100%);
}

/* --- Version watermark (bottom-right) --- */
.version-watermark {
  pointer-events: none;
}

.version-watermark-inner {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(150, 160, 175, 0.35);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.35s ease;
  pointer-events: auto;
}

.version-watermark-inner:hover {
  color: rgba(75, 85, 99, 0.85);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-color: rgba(209, 213, 219, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* --- Code blocks --- */
.code-block {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(71, 85, 105, 0.3);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* --- Copy button --- */
.copy-btn {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.copy-btn:hover {
  background-color: #475569;
  color: #e2e8f0;
}

/* --- Badges --- */
.badge {
  transition: transform 0.15s ease;
}

.badge:hover {
  transform: scale(1.05);
}

/* --- Version table --- */
.version-table tr {
  transition: background-color 0.15s ease;
}

.version-table tr:hover {
  background-color: rgba(241, 245, 249, 0.8);
}

/* --- Platform icon containers --- */
.platform-icon {
  transition: transform 0.2s ease;
}

.platform-icon:hover {
  transform: scale(1.08);
}

/* --- Section headings --- */
.section-heading {
  position: relative;
  padding-left: 0.75rem;
}

.section-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #2da1f5, #0d82e0);
}

/* --- Footer --- */
.site-footer {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
}

/* --- Config entries --- */
.config-entry {
  transition: background-color 0.15s ease;
}

.config-entry:hover {
  background-color: rgba(241, 245, 249, 0.5);
}

/* --- Links --- */
.link-accent {
  transition: color 0.2s ease;
}

/* --- Subtle fade-in animation --- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fade-in-up 0.4s ease-out both;
}

.animate-in-delay-1 {
  animation: fade-in-up 0.4s ease-out 0.1s both;
}

.animate-in-delay-2 {
  animation: fade-in-up 0.4s ease-out 0.2s both;
}

.animate-in-delay-3 {
  animation: fade-in-up 0.4s ease-out 0.3s both;
}

/* --- Pulse glow for download button (dashboard) --- */
@keyframes subtle-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
  50% { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); }
}

.download-btn:not(.download-btn-3d) {
  animation: subtle-glow 3s ease-in-out infinite;
}

.download-btn:not(.download-btn-3d):hover {
  animation: none;
}