/* Modern visual layer for the FCGIE DLE template. Loaded last on purpose. */
:root {
  --fc-blue: #174ea6;
  --fc-blue-strong: #0d3477;
  --fc-cyan: #49b8d6;
  --fc-ink: #15233b;
  --fc-muted: #63718a;
  --fc-glass: rgba(255, 255, 255, .76);
  --fc-line: rgba(255, 255, 255, .72);
  --fc-shadow: 0 18px 50px rgba(24, 64, 119, .13);
  --fc-radius: 22px;
}

html { scroll-behavior: smooth; }

body {
  color: var(--fc-ink);
  background:
    radial-gradient(circle at 8% 6%, rgba(73,184,214,.22), transparent 29rem),
    radial-gradient(circle at 92% 18%, rgba(23,78,166,.15), transparent 34rem),
    linear-gradient(150deg, #f4f8ff 0%, #fbfdff 45%, #edf5ff 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(12px);
  pointer-events: none;
}
body::before { width: 250px; height: 250px; top: 22%; left: -90px; background: rgba(65,174,207,.13); }
body::after { width: 330px; height: 330px; right: -140px; bottom: 5%; background: rgba(35,86,181,.11); }

a, button, .btn, input, select, textarea, .panel, .card {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease,
              box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(73,184,214,.42) !important;
  outline-offset: 3px;
}

.container.cnt {
  padding-top: 14px;
  padding-bottom: 20px;
}

.bg-header,
.app-header {
  background: rgba(250,253,255,.7) !important;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 12px 38px rgba(17,55,105,.1);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
}

.navbar, .navbar-inverse {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(13,52,119,.96), rgba(23,78,166,.91)) !important;
  box-shadow: 0 12px 35px rgba(13,52,119,.2);
}
.navbar a:hover { text-decoration: none; }
.navbar-nav > li > a { border-radius: 12px; }
.navbar-nav > li > a:hover { background: rgba(255,255,255,.12) !important; transform: translateY(-1px); }

.panel, .card, .well, .modal-content, .dropdown-menu, .list-group-item,
.dle-table-responsive, .ui-widget-content {
  background: var(--fc-glass) !important;
  border: 1px solid var(--fc-line) !important;
  border-radius: var(--fc-radius) !important;
  box-shadow: var(--fc-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}
.panel { overflow: hidden; }
.panel-heading {
  padding: 15px 18px;
  border: 0 !important;
  border-bottom: 1px solid rgba(23,78,166,.1) !important;
  background: rgba(244,249,255,.62) !important;
  color: var(--fc-blue-strong) !important;
  font-weight: 700;
}
.panel-body { background: transparent !important; }

.btn, a.rightside_menu {
  border-radius: 13px !important;
  font-weight: 600;
  letter-spacing: .01em;
}
.btn-primary, a.rightside_menu {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  background: linear-gradient(135deg, var(--fc-blue), var(--fc-blue-strong)) !important;
  box-shadow: 0 8px 20px rgba(23,78,166,.2);
}
.btn:hover, a.rightside_menu:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(23,78,166,.25); text-decoration: none; }
.btn:active, a.rightside_menu:active { transform: translateY(0) scale(.98); }

.form-control, input[type="text"], input[type="search"], input[type="email"], textarea, select {
  min-height: 42px;
  border-radius: 12px !important;
  border: 1px solid rgba(29,76,140,.16) !important;
  background: rgba(255,255,255,.7) !important;
  box-shadow: inset 0 1px 2px rgba(12,42,82,.04);
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: rgba(73,184,214,.75) !important;
  box-shadow: 0 0 0 4px rgba(73,184,214,.14) !important;
}

.short-news .panel:hover, .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 55px rgba(20,60,115,.17);
}
.full-content img, .short-news img, .card img { border-radius: 16px; }

.footer-bottom, footer .bg-grey {
  border-radius: 22px 22px 0 0;
  background: linear-gradient(135deg, rgba(13,52,119,.96), rgba(21,35,59,.96)) !important;
  box-shadow: 0 -12px 36px rgba(17,55,105,.12);
}

.fc-reveal { opacity: 0; transform: translateY(18px); }
.fc-reveal.fc-visible { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); }

/* DLE and Stacktable/Cardtable may recreate these nodes after page load. */
.dle-table-responsive,
.dle-table-responsive.fc-reveal,
.dle-table-responsive table,
.stacktable,
.stacktable.fc-reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* A table may be injected into an already animated DLE block. */
.fc-reveal:has(table),
.fadeOut:has(table) {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  animation: none !important;
}

.dark {
  --fc-ink: #edf5ff;
  --fc-muted: #b8c6da;
  --fc-glass: rgba(20,31,50,.76);
  --fc-line: rgba(255,255,255,.1);
  --fc-shadow: 0 18px 50px rgba(0,0,0,.25);
}
body.dark {
  background: radial-gradient(circle at 10% 5%, #16365f 0, transparent 32rem),
              radial-gradient(circle at 90% 20%, #172959 0, transparent 34rem), #0c1423;
}
.dark .bg-header, .dark .app-header { background: rgba(12,20,35,.72) !important; border-color: rgba(255,255,255,.08); }
.dark .form-control, .dark input, .dark textarea, .dark select { background: rgba(18,30,50,.82) !important; color: #fff !important; }

@media (max-width: 767px) {
  :root { --fc-radius: 17px; }
  body { background-attachment: scroll; }
  .container.cnt { padding-left: 10px; padding-right: 10px; }
  .navbar { border-radius: 15px; }
  .panel, .card, .well { box-shadow: 0 10px 28px rgba(24,64,119,.1); }
  .btn:hover, a.rightside_menu:hover, .short-news .panel:hover, .card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fc-reveal { opacity: 1; transform: none; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .bg-header, .app-header, .panel, .card, .well, .modal-content, .dropdown-menu { background: #f8fbff !important; }
  .dark .bg-header, .dark .app-header, .dark .panel, .dark .card, .dark .well, .dark .modal-content { background: #17243a !important; }
}