/* ==========================================================================
   Lovvo — modern UI skin
   Loaded last (after Bootstrap 3 + theme.css) so it wins on specificity
   without touching any PHP templates or breaking existing markup/classes.

   Palette: quiet, premium dark blue — deep navy/indigo gradients, one
   restrained sky-blue accent, muted neutrals. Not a neon/rainbow gaming skin.
   ========================================================================== */

/* Inter kept loaded (some legacy/third-party widgets on these pages still
   reference it directly) but no longer the base typeface below - see
   Montserrat import + body rule. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand palette (colorhunt 0f2854-1c4d8d-4988c4-bde8f5):
     #0F2854 darkest · #1C4D8D dark · #4988C4 mid · #BDE8F5 light */
  --lovvo-bg: #0F2854;
  --lovvo-bg-2: #143a72;
  --lovvo-surface: #1C4D8D;
  --lovvo-surface-2: #245aa3;
  --lovvo-border: #2f6bb0;
  --lovvo-border-soft: rgba(189, 232, 245, 0.10);
  --lovvo-text: #EAF6FB;
  --lovvo-text-dim: #9FC6E4;
  --lovvo-primary: #4988C4;
  --lovvo-primary-soft: #BDE8F5;
  --lovvo-primary-deep: #1C4D8D;
  --lovvo-accent: #4988C4;
  --lovvo-accent-2: #1C4D8D; /* was violet - kept in-palette now */
  --lovvo-success: #5fae8d;
  --lovvo-danger: #c06868;
  --lovvo-radius: 18px;
  --lovvo-radius-sm: 10px;
  --lovvo-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 34px rgba(3, 6, 16, 0.55);
  --lovvo-transition: 180ms cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  background:
    radial-gradient(1000px 560px at 12% -10%, rgba(73, 136, 196, 0.18), transparent 60%),
    radial-gradient(800px 500px at 100% 10%, rgba(189, 232, 245, 0.10), transparent 55%),
    linear-gradient(165deg, var(--lovvo-bg) 0%, var(--lovvo-bg-2) 55%, #0F2854 100%) !important;
  color: var(--lovvo-text);
  /* !important: theme.css's `#Lovvo { font-family: "Ubuntu" }` is an ID
     selector, which always outranks this plain `body` element selector
     regardless of load order - without this, the page quietly stayed on
     Ubuntu no matter what font-family was set here. */
  font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  min-height: 100vh;
}

/* Every logged-in page wraps its content in a per-account customizable
   ".container-fluid.bg-holo" panel. Its own <style> block (written per
   request by header.php, no !important) layers a repeating brand-tile PNG
   (design/bg/bg_5.png) behind everything - that tiled watermark, not the
   navy gradient above, was what was actually painting the page background,
   which is why the whole "chill blue" theme never showed through below the
   header. Drop the repeating tile, keep the single hero banner image. */
.container-fluid.bg-holo {
  background-image: none !important;
  background-color: transparent !important;
  /* theme.css also draws `box-shadow: 0 1px 2px 1px rgba(0,0,0,.5)` on
     this element - across a full-width/height wrapper that reads as a
     faint black rectangle boxing in everything inside it. */
  box-shadow: none !important;
}

/* ---- Top navbar --------------------------------------------------------- */
.navbar-default {
  /* Near-opaque on purpose: pages with a busy background (photo/video)
     were letting sharp shapes bleed through the blur as stray-looking
     lines behind the nav items - a few % more opacity hides that
     without losing the glass feel entirely. */
  background: linear-gradient(90deg, rgba(15, 40, 84, 0.985), rgba(20, 52, 104, 0.985)) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1200; /* keeps the whole navbar (and its dropdowns) above the
                    animated cards below - see stacking-context note lower down */
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav .dropdown-toggle > li > a {
  color: var(--lovvo-text-dim) !important;
  background: transparent !important;
  font-weight: 500;
  transition: color var(--lovvo-transition), background var(--lovvo-transition);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav .dropdown-toggle > li.active > a,
.navbar-default .navbar-nav .dropdown-toggle > li > a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--lovvo-radius-sm);
}
.navbar-default .navbar-nav > li.active > a {
  position: relative;
}
.navbar-default .navbar-nav > li.active > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--lovvo-primary);
}

/* Dropdown panels: force well above any stacking context an animated/transformed
   card below might create (transform implicitly creates a new stacking context,
   which is what was letting cards paint over the open dropdown). */
/* Selector specificity note: header.php has its own inline <style> block
   (from the original theme) with `.dropdown-menu { background-color:
   #ffffff !important; }`. Same specificity + both !important = whichever
   rule is later in the DOM wins, and that inline block sits after our
   <link>, so it was winning - white background, light-gray text, unreadable.
   `body .navbar-default .dropdown-menu` outweighs it on specificity alone
   regardless of source order. */
body .navbar-default .dropdown-menu {
  z-index: 5000 !important;
  background: var(--lovvo-surface) !important;
  border: 1px solid var(--lovvo-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  border-radius: var(--lovvo-radius-sm) !important;
  padding: 8px !important;
  min-width: 220px !important;
  margin-top: 8px !important;
}
body .navbar-default .dropdown-menu > li > a {
  color: var(--lovvo-text) !important;
  background: transparent !important;
  border-radius: 7px !important;
  padding: 9px 12px !important;
  font-weight: 500;
  font-size: 13.5px;
  transition: background var(--lovvo-transition), color var(--lovvo-transition), transform var(--lovvo-transition);
}
body .navbar-default .dropdown-menu > li > a:hover,
body .navbar-default .dropdown-menu > li > a:focus {
  background: rgba(73, 136, 196, 0.14) !important;
  color: #fff !important;
  transform: translateX(2px);
}
body .navbar-default .dropdown-menu > li > a .label,
body .navbar-default .dropdown-menu > li > a b.label {
  background: var(--lovvo-primary) !important;
  border-radius: 999px;
  font-weight: 600;
}
body .navbar-default .dropdown-menu .divider { background: var(--lovvo-border) !important; margin: 6px 4px !important; }

/* ---- Cards --------------------------------------------------------------- */
/* Premium "lounge" shape: one soft, one sharp corner pair (not a uniform
   rounded box) plus a faint permanent blue ambient glow that blooms on
   hover - this is the "exclusive, not classic" card language used site-wide. */
/* Glassmorphism, site-wide: every .card (login, register, /me, and every
   other PHP page - the game client is a separate renderer and untouched)
   now shares one frosted-glass recipe instead of the old opaque gradient.
   Previously only /me and values.php had their own local, near-identical
   glass copy of this; everything else (login, register, staff, community,
   articles, ...) got the flat surface-color version. Centralizing it here
   means every card is visually identical and any future tweak (blur
   strength, tint, opacity) only needs to happen once. */
.card {
  background:
    radial-gradient(420px 200px at -10% -20%, rgba(28, 77, 141, 0.16), transparent 60%),
    radial-gradient(320px 180px at 110% 100%, rgba(189, 232, 245, 0.12), transparent 60%),
    linear-gradient(160deg, rgba(20, 29, 53, 0.72) 0%, rgba(26, 37, 64, 0.72) 100%) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(189, 232, 245, 0.2) !important;
  border-radius: 26px 26px 26px 8px !important;
  box-shadow: var(--lovvo-shadow), 0 0 0 1px rgba(73, 136, 196, 0.05), 0 18px 40px -14px rgba(20, 40, 100, 0.35);
  overflow: hidden;
  transition: transform var(--lovvo-transition), box-shadow 260ms ease, border-color var(--lovvo-transition);
  position: relative;
  z-index: 1; /* keep explicitly below the navbar's stacking context */
  margin-bottom: 24px;
}
/* Browsers with no backdrop-filter support (rare in 2026, but graceful
   fallback matters for a hobby site) just get a more opaque tint instead
   of losing readability entirely. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card {
    background:
      radial-gradient(420px 200px at -10% -20%, rgba(28, 77, 141, 0.16), transparent 60%),
      radial-gradient(320px 180px at 110% 100%, rgba(189, 232, 245, 0.12), transparent 60%),
      linear-gradient(160deg, rgba(20, 29, 53, 0.94) 0%, rgba(26, 37, 64, 0.94) 100%) !important;
  }
}
.card:hover {
  border-color: rgba(73, 136, 196, 0.45) !important;
  box-shadow: var(--lovvo-shadow), 0 0 0 1px rgba(73, 136, 196, 0.12), 0 20px 48px -12px rgba(73, 136, 196, 0.32);
}
.card .body { color: var(--lovvo-text) !important; }
.card h1.title {
  background: linear-gradient(90deg, rgba(73, 136, 196, 0.16), rgba(189, 232, 245, 0.05)) !important;
  border-bottom: 1px solid var(--lovvo-border) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 16px 22px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card h1.title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--lovvo-accent-2), var(--lovvo-primary-soft));
  box-shadow: 0 0 10px rgba(28, 77, 141, 0.7);
}
.card .body { padding: 20px !important; }
.card h1.title a { color: var(--lovvo-primary-soft) !important; }
/* Cards that are natively padding:0 (news/radio/discord shells) still need
   the asymmetric radius to read as one family, and their own inner
   h1.title bars shouldn't double up the accent dot with a following <a>. */
.card[style*="padding: 0"] h1.title,
.card[style*="padding:0"] h1.title { border-radius: 26px 26px 0 0; }

/* ---- Buttons --------------------------------------------------------------- */
.btn, .btn-block, a.btn {
  border-radius: var(--lovvo-radius-sm) !important;
  font-weight: 600;
  border: none !important;
  transition: transform var(--lovvo-transition), box-shadow var(--lovvo-transition), filter var(--lovvo-transition);
}
.btn:hover, a.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn:active, a.btn:active { transform: translateY(0); }
.btn-success, a.btn-success {
  background: linear-gradient(135deg, #7fbd91, var(--lovvo-success)) !important;
  box-shadow: 0 6px 16px rgba(111, 174, 130, 0.25);
  color: #0e2417 !important;
}
/* The main "Enter Hotel Client" CTA - the single most important button on
   the page - gets the signature blue gradient instead of the generic
   .btn-success green, plus extra size/weight so it clearly reads as
   primary. Targeted by its href so no PHP template edit is needed. */
a[href$="/client"].btn {
  background: linear-gradient(120deg, var(--lovvo-accent-2), var(--lovvo-primary-soft), var(--lovvo-primary), var(--lovvo-primary-deep)) !important;
  background-size: 260% 100% !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 15px 20px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(73, 136, 196, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  transition: background-position 400ms ease, transform var(--lovvo-transition), box-shadow var(--lovvo-transition);
}
a[href$="/client"].btn:hover {
  background-position: 100% 0 !important;
  box-shadow: 0 12px 32px rgba(73, 136, 196, 0.6) !important;
  transform: translateY(-2px);
}
.btn-primary, a.btn-primary {
  background: linear-gradient(135deg, var(--lovvo-primary-soft), var(--lovvo-primary-deep)) !important;
  box-shadow: 0 6px 16px rgba(73, 136, 196, 0.3);
  color: #fff !important;
}
.btn-danger, a.btn-danger {
  background: linear-gradient(135deg, #c67d7d, var(--lovvo-danger)) !important;
  box-shadow: 0 6px 16px rgba(185, 106, 106, 0.25);
}
.btn:not(.btn-success):not(.btn-primary):not(.btn-danger), a.btn:not(.btn-success):not(.btn-primary):not(.btn-danger) {
  background: var(--lovvo-surface-2) !important;
  border: 1px solid var(--lovvo-border) !important;
  color: var(--lovvo-text) !important;
}
.btn:not(.btn-success):not(.btn-primary):not(.btn-danger):hover { background: var(--lovvo-border) !important; }

/* ---- Currency pills (window_style_2) -------------------------------------- */
/* Same glassmorphism pass as .card above - these currency/stat pills were
   still the old flat gradient swatch everywhere except /me (which had its
   own local glass copy). Centralized here so every page matches. */
.window_style_2 {
  background: rgba(8, 13, 28, 0.55) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(189, 232, 245, 0.16) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: none !important;
  margin-bottom: 8px !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .window_style_2 { background: rgba(8, 13, 28, 0.85) !important; }
}
.window_style_2 .inner:first-child { background: transparent !important; }
/* The PHP templates hardcode loud inline colors per-currency (neon yellow,
   cyan, magenta, red...) - override with !important since inline style=""
   otherwise wins. One quiet warm neutral for all of them reads calmer and
   more "premium set" than a different neon per stat. */
.window_style_2 .TextWaehrung {
  font-weight: 600 !important;
  font-size: 13px;
  color: var(--lovvo-text-dim) !important;
  text-shadow: none !important;
}
.window_style_2 .count_number {
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: none !important;
}
.window_style_2 .inner:last-child {
  background-color: var(--lovvo-surface-2) !important;
  opacity: 0.9;
}

/* ---- Alerts (e.g. "no active rooms") ---------------------------------------- */
.alert.alert-danger {
  background: linear-gradient(135deg, rgba(192, 104, 104, 0.22), rgba(192, 104, 104, 0.12)) !important;
  border: 1px solid rgba(192, 104, 104, 0.4) !important;
  color: #f1c6c6 !important;
  border-radius: var(--lovvo-radius-sm) !important;
}

/* ---- Badges ---------------------------------------------------------------- */
.badge {
  background: rgba(73, 136, 196, 0.14) !important;
  color: var(--lovvo-primary-soft) !important;
  border: 1px solid rgba(73, 136, 196, 0.28) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}

/* ---- Tables (active rooms list) -------------------------------------------- */
.table, table.rooms {
  color: var(--lovvo-text) !important;
  background: transparent !important;
}
.table > tbody > tr {
  border-bottom: 1px solid var(--lovvo-border) !important;
  transition: background var(--lovvo-transition);
}
.table > tbody > tr:hover { background: rgba(255, 255, 255, 0.03) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.015) !important; }
.table td { border: none !important; vertical-align: middle !important; }

/* ---- Avatar / motto card ---------------------------------------------------- */
/* .mebg.bg_xmas carries its own light seasonal photo (mebox_5.png, no
   !important) as its background - that pale image under our light card
   text is exactly what read as "washed out" in the profile card. Replace
   it outright with the same dark surface gradient the rest of the cards
   use, so it reads as one consistent card, not a leftover seasonal skin. */
.mebg,
.mebg.bg_xmas {
  background:
    radial-gradient(420px 180px at -10% -20%, rgba(73, 136, 196, 0.18), transparent 60%),
    linear-gradient(160deg, var(--lovvo-surface) 0%, var(--lovvo-surface-2) 100%) !important;
  background-size: cover !important;
}
.mottobox h1, .mottobox h5 { color: var(--lovvo-text) !important; }
.mottobox b { color: #fff !important; }
/* The theme's own (non-!important) `.mebg .body { padding-left: 140px }`
   reserves room so the username/motto text sits beside the avatar, not on
   top of it. Our blanket `.card .body { padding: 20px !important }` above
   was !important and so clobbered that reserved space regardless of its
   own higher specificity - collapsing the gap and dropping the text
   straight over the character's face. Restore the reserved space, !important
   for !important, scoped to just this card. */
.card.mebg .body {
  padding: 20px 20px 20px 150px !important;
  min-height: 150px;
}

/* ---- Sidebar "listening" campaign rows -------------------------------------- */
/* theme.css stripes these rows with a near-white fill (#fdfdfd7d, no
   !important) meant for the original light skin. Combined with our light
   nav/body text colour that produced near-invisible pale-on-pale rows -
   the actual cause of the "Lovvo Campaigns" card looking washed out.
   Swap the stripe for a dark tint instead of removing it, so alternating
   rows still read as a list, just in the dark theme's own language. */
.listening.autoeven:nth-child(2n+1),
.listening.even {
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: var(--lovvo-radius-sm);
}
.listening.autoeven a.colorchange {
  border-radius: var(--lovvo-radius-sm);
  transition: background var(--lovvo-transition), transform var(--lovvo-transition);
  display: block;
  padding: 6px;
}
.listening.autoeven a.colorchange:hover {
  background: rgba(73, 136, 196, 0.08);
  transform: translateX(3px);
}
.listening.autoeven span,
.listening.autoeven a.colorchange { color: var(--lovvo-text) !important; }
.listening.autoeven span[style*="font-size: 15px"] {
  color: #fff !important;
  font-weight: 700;
}

/* ---- Focus states for accessibility ----------------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--lovvo-primary-soft);
  outline-offset: 2px;
}

/* ---- Scrollbar (webkit) ------------------------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--lovvo-bg); }
::-webkit-scrollbar-thumb { background: var(--lovvo-border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--lovvo-primary); }

/* ==========================================================================
   Lightweight entrance + interaction motion.
   transform/opacity only, 150-450ms, staggered by nth-child so it reads as
   one deliberate reveal. Disabled under prefers-reduced-motion (top of file).

   Note: `transform` (even at translateY(0)) creates a new CSS stacking
   context. That's what caused the "dropdown hidden behind cards" bug -
   the open dropdown's z-index only wins *within* its own context, and once
   a later sibling gets its own context via transform, it can paint over it
   regardless of z-index. Fixed by explicitly pinning the navbar to a high
   z-index/its own stacking context (above) and cards to a low one (z-index:1
   above), so cards can keep their hover/entrance transform without ever
   competing with the nav's dropdowns again.
   ========================================================================== */

@keyframes lovvo-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lovvo-pop {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes lovvo-sheen {
  from { transform: translateX(-120%) skewX(-15deg); }
  to   { transform: translateX(220%) skewX(-15deg); }
}

.card {
  animation: lovvo-rise 420ms cubic-bezier(.16,1,.3,1) both;
}
.card:nth-of-type(1) { animation-delay: 0ms; }
.card:nth-of-type(2) { animation-delay: 70ms; }
.card:nth-of-type(3) { animation-delay: 140ms; }
.card:nth-of-type(4) { animation-delay: 210ms; }
.card:nth-of-type(n+5) { animation-delay: 260ms; }

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

.window_style_2 { animation: lovvo-pop 320ms ease-out both; }
.window_style_2:nth-of-type(1) { animation-delay: 160ms; }
.window_style_2:nth-of-type(2) { animation-delay: 210ms; }
.window_style_2:nth-of-type(3) { animation-delay: 260ms; }
.window_style_2:nth-of-type(4) { animation-delay: 310ms; }

/* Primary CTA: one quiet sheen pass every 5s - a hint of polish, not a flashing banner */
.btn-success, a.btn-success {
  position: relative;
  overflow: hidden;
}
.btn-success::after, a.btn-success::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: lovvo-sheen 5s ease-in-out infinite;
  animation-delay: 1.5s;
  pointer-events: none;
}

.navbar-default .navbar-nav > li.active > a::after {
  animation: lovvo-rise 220ms ease-out both;
}

/* ==========================================================================
   Extra "exclusive" polish — still transform/opacity/background-position
   only, so it stays light: no layout thrash, no JS, GPU-composited.
   ========================================================================== */

@keyframes lovvo-drift {
  0%, 100% { background-position: 0% 0%, 100% 0%, 0% 0%; }
  50%      { background-position: 6% 4%, 94% 6%, 0% 0%; }
}
@keyframes lovvo-border-glow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@keyframes lovvo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes lovvo-underline-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Whole-page background very slowly drifts - barely perceptible, adds life
   without ever drawing attention to itself. */
body { animation: lovvo-drift 26s ease-in-out infinite; background-size: 140% 140%, 140% 140%, 100% 100%; }

/* Each card gets a slim gradient top-edge accent, like a premium SaaS
   dashboard card - static by default, gently pulses only while hovered. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lovvo-accent-2), var(--lovvo-primary), var(--lovvo-accent), transparent);
  opacity: 0.6;
}
.card:hover::before {
  animation: lovvo-border-glow 1.6s ease-in-out infinite;
}

/* Avatar art breathes gently - reads as "alive" without being distracting */
.mebg .shine { animation: lovvo-float 4.5s ease-in-out infinite; }

/* Nav active underline grows from center instead of just fading in */
.navbar-default .navbar-nav > li.active > a::after {
  transform-origin: center;
  animation: lovvo-underline-grow 260ms cubic-bezier(.16,1,.3,1) both;
}

/* Dropdown panel eases open instead of snapping */
.open > .dropdown-menu {
  animation: lovvo-rise 180ms cubic-bezier(.16,1,.3,1) both;
}

/* ---- LovvoFM radio widget --------------------------------------------------- */
/* This reads as its own "mini player" rather than a generic card row - a
   distinct deep gradient + blurred colour blob behind the visual, and a
   two-row flex layout so it never fights for space and wraps mid-word. */
.lovvo-radio-card {
  background:
    radial-gradient(160px 120px at 0% 0%, rgba(28, 77, 141, 0.16), transparent 65%),
    radial-gradient(160px 120px at 100% 0%, rgba(189, 232, 245, 0.14), transparent 65%),
    linear-gradient(160deg, var(--lovvo-surface) 0%, var(--lovvo-surface-2) 100%) !important;
}
.lovvo-radio-card .body { padding: 18px 20px !important; }
.lovvo-radio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}
.lovvo-radio-visual {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(28, 77, 141, 0.24), rgba(189, 232, 245, 0.16));
  border: 1px solid rgba(73, 136, 196, 0.3);
  box-shadow: 0 0 16px rgba(73, 136, 196, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lovvo-radio-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}
.lovvo-radio-bars span {
  width: 3px;
  height: 30%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--lovvo-primary-soft), var(--lovvo-primary));
  transition: height var(--lovvo-transition);
}
.lovvo-radio-bars.playing span {
  animation: lovvo-eq 900ms ease-in-out infinite;
}
.lovvo-radio-bars span:nth-child(1) { animation-delay: 0ms; }
.lovvo-radio-bars span:nth-child(2) { animation-delay: 120ms; }
.lovvo-radio-bars span:nth-child(3) { animation-delay: 240ms; }
.lovvo-radio-bars span:nth-child(4) { animation-delay: 90ms; }
.lovvo-radio-bars span:nth-child(5) { animation-delay: 200ms; }
@keyframes lovvo-eq {
  0%, 100% { height: 25%; }
  50% { height: 90%; }
}
.lovvo-radio-info {
  flex: 1 1 150px;
  min-width: 110px;
  max-width: 100%;
  overflow: hidden;
}
.lovvo-radio-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--lovvo-primary-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lovvo-radio-track {
  font-size: 13px;
  color: var(--lovvo-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
/* Toggle + volume always get their own full line below the visual/info
   row (flex-basis: 100% forces a wrap onto a new flex line), instead of
   trying to share the first line and relying on the browser's wrap/shrink
   math to leave enough room. That's what was leaving the slider stranded
   mid-row with its right edge clipped by the card's `overflow: hidden` -
   forcing the line break removes the ambiguity entirely. */
.lovvo-radio-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-basis: 100%;
  justify-content: flex-end;
  margin-top: 2px;
}
.lovvo-radio-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lovvo-primary-soft), var(--lovvo-primary-deep));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(73, 136, 196, 0.35);
  transition: transform var(--lovvo-transition), box-shadow var(--lovvo-transition);
}
.lovvo-radio-toggle svg#lovvoRadioIconPlay { margin-left: 2px; }
.lovvo-radio-toggle:hover { transform: scale(1.06); box-shadow: 0 8px 20px rgba(73, 136, 196, 0.5); }
.lovvo-radio-toggle:active { transform: scale(0.96); }
.lovvo-radio-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 90px;
  max-width: 40vw;
  min-width: 40px;
  height: 4px;
  margin: 0;
  vertical-align: middle;
  background: var(--lovvo-border);
  border-radius: 999px;
  accent-color: var(--lovvo-primary);
  flex-shrink: 1;
  cursor: pointer;
}
/* Reset the browser's default track/thumb explicitly - relying on
   accent-color alone left the native thumb/track box a different height
   in some renderers, which is what read as the slider sitting "miring"
   (crooked/off-axis) next to the round play button. */
.lovvo-radio-volume::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--lovvo-border);
}
.lovvo-radio-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--lovvo-primary-soft);
  box-shadow: 0 0 6px rgba(73, 136, 196, 0.6);
  cursor: pointer;
}
.lovvo-radio-volume::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--lovvo-border);
}
.lovvo-radio-volume::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: var(--lovvo-primary-soft);
  box-shadow: 0 0 6px rgba(73, 136, 196, 0.6);
  cursor: pointer;
}
@media (max-width: 420px) {
  .lovvo-radio-volume { display: none; }
}

/* ---- Discord embed frame ------------------------------------------------- */
/* The theme hardcodes width="435" on the <iframe>, which overflows a
   narrower col-md-5 column and forces the whole card wider than its
   siblings - the exact "berantakan" symptom. Cap it responsively and give
   it a premium bordered frame instead of a bare floating rectangle. */
.card .body iframe[src*="discord.com"] {
  width: 100% !important;
  max-width: 435px;
  border-radius: var(--lovvo-radius-sm);
  border: 1px solid var(--lovvo-border) !important;
  box-shadow: 0 10px 26px rgba(3, 6, 16, 0.4);
}

/* ---- Header banner (Lovvo scenic image) ----------------------------------- */
/* header_17.png was replaced with a much taller (~2.4:1 vs. the old ~4.8:1)
   scenic banner. The stock rule (theme_system.php's inline <style>) has no
   background-size, so it defaults to natural size + top-left crop, which
   chopped off everything but a sliver of sky. Force a proper cover-fit. */
.container-fluid.header {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ---- Sailing ship (header.php's .bg-hotel) -------------------------------- */
/* Small ship sprite that sails back and forth across the header-right area:
   left (facing left, as drawn) toward the logo, flip to face right, sail
   back to the right edge, flip back, loop. Lives in its own file
   (lovvo_ship_small.png) rather than overwriting headerright_1.png, since
   that file is still used at full size by index.php/register.php's own
   .bg-hotel and by the account-design picker thumbnail gallery. */
.bg-hotel { position: relative; background: none !important; }
.lovvo-ship-sail {
  position: absolute;
  bottom: 4px;
  height: 70px;
  width: auto;
  pointer-events: none;
  animation: lovvoShipSail 22s linear infinite;
}
@keyframes lovvoShipSail {
  0%   { left: calc(100% - 380px); transform: scaleX(1); }
  45%  { left: 10px;               transform: scaleX(1); }
  50%  { left: 10px;               transform: scaleX(-1); }
  95%  { left: calc(100% - 380px); transform: scaleX(-1); }
  100% { left: calc(100% - 380px); transform: scaleX(1); }
}