/* ==========================================================================
   Design Tokens & Scroll Animations
   Bootstrap 5.3 Migration — variables.css
   ========================================================================== */

:root {
  /* Brand colors */
  --bg-dark: #082031;
  --bg-darker: #06121b;
  --bg-medium: #0e2c40;
  --accent-cyan: #28a3cc;
  --accent-blue: #0a84ff;
  --accent-teal: #14f1d9;

  /* Text */
  --text-primary: #ffffff;
  --text-muted: #8b969e;
  --text-light: #a7b0b7;

  /* Plan colors */
  --plan-standard: #28a3cc;
  --plan-premium: #ff6b35;
  --plan-corporate: #7c4dff;

  /* Spacing */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.2);
  --shadow-glow-cyan: 0 0 30px rgba(40, 163, 204, 0.3);
}

/* ==========================================================================
   BS5 font-size fix
   html is 10px (SKYHOST theme), BS3 set body to 14px explicitly,
   but BS5 uses 1rem (=10px). Restore body to 14px and override
   BS5 rem-based heading sizes to match BS3 pixel values.
   ========================================================================== */
body {
  font-size: 14px;
}
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

/* ==========================================================================
   Transition utilities
   NOTE: style.css has a harmful global * { transition: all ... } rule.
   The css-migration agent will remove it from style.css. These utilities
   provide opt-in transitions for elements that need them.
   ========================================================================== */
.transition-base {
  transition: all 0.2s ease-in-out;
}
.transition-fade {
  transition: opacity 0.3s ease;
}
.transition-transform {
  transition: transform 0.3s ease;
}

/* ==========================================================================
   Scroll animations (replaces WOW.js + animate.css)
   ========================================================================== */
.animate-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-visible {
  opacity: 1;
  transform: translateY(0);
}
.reduce-motion .animate-hidden,
.reduce-motion .animate-visible {
  opacity: 1;
  transform: none;
  transition: none;
}
/* Legacy wow class support for gradual migration */
.wow {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.wow.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure BS5 components aren't hidden by animation styles */
.modal, .offcanvas, .dropdown-menu {
  opacity: revert !important;
  transform: revert !important;
}
/* Popovers/tooltips need opacity override but NOT transform (Popper.js uses transform for positioning) */
.popover, .tooltip {
  opacity: revert !important;
}
.popover { z-index: 9999; }

/* Header dropdown menus (language, notifications, login) */
#languageChooserContent,
#accountNotificationsContent,
#loginOrRegisterContent {
  /* Always display:block (position:absolute, no layout impact) — open/close is
     animated via opacity/transform; !important kept to beat scripts.min.js popover CSS */
  display: block !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0s linear 0.2s;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99999;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
  color: #333;
}
#languageChooserContent.header-dropdown-open,
#accountNotificationsContent.header-dropdown-open,
#loginOrRegisterContent.header-dropdown-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.reduce-motion #languageChooserContent,
.reduce-motion #accountNotificationsContent,
.reduce-motion #loginOrRegisterContent {
  transition: none;
  transform: none;
}
#languageChooserContent ul,
#accountNotificationsContent ul,
#loginOrRegisterContent ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#languageChooserContent ul li a,
#accountNotificationsContent ul li a,
#loginOrRegisterContent ul li a {
  display: block;
  padding: 6px 16px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}
#languageChooserContent ul li a:hover,
#accountNotificationsContent ul li a:hover,
#loginOrRegisterContent ul li a:hover {
  background: #f5f5f5;
}
/* BS3 pull-md-left/right compatibility for sidebar layout */
/* BS5 uses flexbox rows which breaks the old float-based column reordering */
#main-body > .container > .row {
  display: block;  /* Revert to block so float-based pull-md works like BS3 */
}
#main-body > .container > .row::after {
  content: "";
  display: table;
  clear: both;
}
.pull-md-left { float: left !important; }
.pull-md-right { float: right !important; }

/* Ensure parent li is position relative for the dropdown */
ul.top-nav > li { position: relative; }
#languageChooser, #accountNotifications, #loginOrRegister {
  cursor: pointer;
}
/* BS3 .in compatibility for server module output (tab panes only) */
/* Do NOT override .fade globally — it breaks BS5 modal/toast/offcanvas transitions */
.tab-pane.fade:not(.show):not(.in) { opacity: 0; }
.tab-pane.fade.show, .tab-pane.fade.in.active { opacity: 1; display: block; }
.tab-pane.fade.in:not(.active) { display: none; opacity: 0; }