#ovriaExtrasBox .ovria-field-label{
  font-weight: 600;
  font-size: 13px;
  color: rgba(15,23,42,.78);
  margin-bottom: 8px;
}
html.dark #ovriaExtrasBox .ovria-field-label{
  color: rgba(226,232,240,.78);
}
#ovriaExtrasBox .ovria-field-control select,
#ovriaExtrasBox .ovria-field-control input,
#ovriaExtrasBox .ovria-field-control textarea{
  width: 100% !important;
}
/* Ovria website-style top navigation + subnav + hero banner */
:root{
  --ovria-navy:#071a3a;
  --ovria-navy-2:#0a2554;
  --ovria-blue:#0b6bff;
  --ovria-text:#0b1320;
  --ovria-muted:#6b7280;
  --ovria-border:rgba(15,23,42,.10);
}
.ovria-legacy-hidden{ display:none !important; }
#ovriaLegacyLeft{ display:none !important; }


.ovria-topnav{
  position:sticky;
  top:0;
  z-index:60;
  background: #1471AE;
  border-bottom: rgba(255,255,255,.18);
}
.dark .ovria-topnav{
  background: #1471AE;
  border-bottom:1px solid rgba(255,255,255,.08);
}


/* Topnav on brand blue */
.ovria-topnav .ovria-mainnav-link,
.ovria-topnav .ovria-mainnav-btn{
  color:#fff;
}
.ovria-topnav .ovria-mainnav-link:hover,
.ovria-topnav .ovria-mainnav-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}
.ovria-topnav .ovria-mainnav-link.active{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.30);
}
/* Logout button styled like "View Cart" */
.ovria-nav-logout{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:13px;
}
.ovria-nav-logout:hover{
  background: rgba(255,255,255,.16);
}
.ovria-topnav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  max-width:1200px;
  margin:0 auto;
}

.ovria-brand-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.ovria-brand-mark{
  width:30px;height:30px;border-radius:10px;
  background:linear-gradient(135deg, #00c2ff, #7c3aed);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}
.ovria-brand-text{
  font-weight:800;
  letter-spacing:.2px;
  font-size:18px;
  color:var(--ovria-text);
}
.dark .ovria-brand-text{ color:#e5e7eb; }

.ovria-mainnav{ display:flex; align-items:center; gap:8px; }

.ovria-mainnav-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:38px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid transparent;
  color:var(--ovria-text);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  background:transparent;
  cursor:pointer;
}
.ovria-mainnav-link:hover{
  background:rgba(2,132,199,.10);
  border-color:rgba(2,132,199,.18);
}
.ovria-mainnav-link.active{
  background:rgba(11,107,255,.14);
  border-color:rgba(11,107,255,.30);
  color:#0b57d0;
}
.dark .ovria-mainnav-link{ color:#e5e7eb; }
.dark .ovria-mainnav-link:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}
.dark .ovria-mainnav-link.active{
  background:rgba(11,107,255,.20);
  border-color:rgba(11,107,255,.35);
  color:#cfe3ff;
}
.ovria-mainnav-btn{ appearance:none; border:1px solid transparent; }

.ovria-chev{
  width:10px;height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.65;
  margin-left:2px;
}

.ovria-ico{ width:18px;height:18px; display:inline-block; position:relative; }
.ovria-ico-home::before{
  content:"";
  position:absolute; inset:2px 3px 3px 3px;
  border:2px solid currentColor;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  border-top:none;
  transform:translateY(5px);
}
.ovria-ico-home::after{
  content:"";
  position:absolute; left:4px; right:4px; top:1px; height:10px;
  border-left:2px solid currentColor; border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:skewY(-25deg) rotate(45deg);
  border-top-left-radius:2px;
}
.ovria-ico-grid::before{
  content:"";
  position:absolute; inset:2px;
  border:2px solid currentColor;
  border-radius:5px;
}
.ovria-ico-grid::after{
  content:"";
  position:absolute; inset:5px;
  box-shadow:
    0 0 0 2px currentColor,
    8px 0 0 2px currentColor,
    0 8px 0 2px currentColor,
    8px 8px 0 2px currentColor;
  width:2px;height:2px;
}
.ovria-ico-user::before{
  content:"";
  position:absolute; left:5px; right:5px; top:3px; height:6px;
  border:2px solid currentColor; border-radius:999px;
}
.ovria-ico-user::after{
  content:"";
  position:absolute; left:3px; right:3px; bottom:2px; height:9px;
  border:2px solid currentColor; border-top-left-radius:10px; border-top-right-radius:10px;
  border-bottom:none;
}
.ovria-ico-life::before{
  content:"";
  position:absolute; left:2px; right:2px; top:4px; height:10px;
  border:2px solid currentColor; border-radius:999px;
}
.ovria-ico-life::after{
  content:"";
  position:absolute; left:8px; right:8px; top:6px; bottom:6px;
  border-left:2px solid currentColor;
  border-right:2px solid currentColor;
  opacity:.0;
}

.ovria-subnav{
  border-top:1px solid var(--ovria-border);
  background:#fbfcfe;
}
/* Ensure subnav pills use dark text in light mode */
.ovria-subnav a{ color: var(--ovria-text); }
.ovria-subnav .ovria-subnav-pill{ color: var(--ovria-text) !important; }

.dark .ovria-subnav{
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(10,13,26,.55);
}
.ovria-subnav-inner{
  max-width:1200px;
  margin:0 auto;
  /* +2px overall to avoid pill hover/active clipping */
  padding:12px 18px 10px 18px;
}
.ovria-subnav-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
/* Subnav items should feel like navigation buttons (pill buttons) */
.ovria-subnav-link,
.ovria-subnav-pill{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  color:var(--ovria-text);
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.ovria-subnav-link:hover,
.ovria-subnav-pill:hover{
  border-color:rgba(11,107,255,.35);
  background:rgba(11,107,255,.06);
  transform:translateY(-1px);
}
.dark .ovria-subnav-link,
.dark .ovria-subnav-pill{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:#e5e7eb;
  box-shadow:none;
}
.dark .ovria-subnav-link:hover,
.dark .ovria-subnav-pill:hover{
  background:rgba(11,107,255,.22);
  border-color:rgba(11,107,255,.35);
}

.ovria-hero{
  background: linear-gradient(135deg,#031A78 0%, #0b2fa0 50%, #1e40af 100%);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.10);
}

/* Remove decorative white cloud ovals in the hero banner */
.ovria-clouds{ display:none !important; }
.ovria-hero-inner{
  max-width:1200px;
  margin:0 auto;
  /* Slightly tighter bottom padding to reduce the hero→content gap site-wide */
  padding:26px 18px 24px 18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.ovria-hero-title{
  font-size:34px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.5px;
  margin:0;
}
.ovria-hero-desc{
  margin:10px 0 0 0;
  max-width:640px;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.55;
}
.ovria-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ovria-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 14px;
  border-radius:10px;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  border:1px solid transparent;
}
.ovria-btn-primary{
  background:linear-gradient(180deg,#1f7aff,#0b6bff);
  color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.ovria-btn-primary:hover{ filter:brightness(1.02); }
.ovria-btn-ghost{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-color:rgba(255,255,255,.22);
}
.ovria-btn-ghost:hover{ background:rgba(255,255,255,.14); }

.ovria-clouds{
  height:22px;
  background:
    radial-gradient(circle at 12% 90%, #fff 0 13px, transparent 14px),
    radial-gradient(circle at 24% 110%, #fff 0 16px, transparent 17px),
    radial-gradient(circle at 36% 95%, #fff 0 12px, transparent 13px),
    radial-gradient(circle at 50% 112%, #fff 0 18px, transparent 19px),
    radial-gradient(circle at 64% 92%, #fff 0 13px, transparent 14px),
    radial-gradient(circle at 78% 110%, #fff 0 16px, transparent 17px),
    radial-gradient(circle at 90% 95%, #fff 0 12px, transparent 13px);
  opacity:.95;
}

/* Give main content breathing room under the hero */
body .flex.md\:h-\[calc\(100vh\)\]{
  /* Some pages wrap main content in a full-viewport flex container,
     which can push content down leaving a large blank gap under the hero.
     Force natural document flow (top-aligned). */
  align-items:stretch;
  justify-content:flex-start !important;
  height:auto !important;
  min-height:0 !important;
}

/* --- Ovria: consistent page container + hero→content spacing --- */
:root{
  --ovria-container:1200px;
  --ovria-gutter:18px;
}

/* Reduce the "big gap" under the hero on common pages (dashboard/server list etc.)
   without touching vpsmanage (which uses a custom header card above its main). */
.ovria-page-wrap .khidki:not(#vpsmanage) > main{
  padding-top:16px !important;
}

/* --- Ovria: vpsmanage width alignment to match other pages/hero --- */
/* Header card block (the bar under hero with Start/VNC/Delete) */
#vpsmanage > .px-5.pt-5{
  /* match global gutter and tighten top spacing */
  padding-left:var(--ovria-gutter) !important;
  padding-right:var(--ovria-gutter) !important;
    /* tuck the header card closer to the hero */
  padding-top:2px !important;
  margin-top:-10px !important;
}

#vpsmanage > .px-5.pt-5 > .ovria-header-card{
  /* Match main content *inner* width (main has padding on both sides). */
  max-width:calc(var(--ovria-container) - (2 * var(--ovria-gutter)));
  margin-left:auto;
  margin-right:auto;
}

/* Main content area (tab bar + tab content) */
#vpsmanage > main{
  max-width:var(--ovria-container);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--ovria-gutter) !important;
  padding-right:var(--ovria-gutter) !important;
}


/* --- vNext adjustments: remove legacy left sidebar completely --- */
#sideBar, #toggleButton, #leftRailHeader, .ovria-legacy-hidden { display:none !important; }

/* Ensure content uses full width */
body .ovria-layout, body .ovria-shell, body .ovria-content { margin-left:0 !important; }

/* Brand logo */
.ovria-brand-img{ height:32px; width:auto; display:block; }

/* Main nav buttons no chevrons; ensure cursor */
.ovria-mainnav-btn{ position:relative; }
.ovria-mainnav-btn::after{ content:''; } /* no dropdown indicator */

/* Subnav always visible */
.ovria-subnav{ display:block; }

/* Subnav list spacing */
.ovria-subnav-list{ gap:10px; }

/* Make subnav pills slightly wider for long text */
.ovria-subnav-link{ padding:8px 14px; border-radius:999px; white-space:nowrap; }


/* Overrides: brand topnav (active text stays white) */
.ovria-topnav .ovria-mainnav a,
.ovria-topnav .ovria-topnav-actions a,
.ovria-topnav .ovria-brand a{ color:#fff; }
.ovria-topnav .ovria-mainnav a.active{ background: rgba(255,255,255,.14); color:#fff; }
/* === OVRIA brand tweaks v7.1 === */
.ovria-mainnav-link{
  color: rgba(255,255,255,.92);
}
.ovria-mainnav-link:hover{
  background: rgba(255,255,255,.14);
  color: #fff;
}
.ovria-mainnav-link.ovria-active,
.ovria-mainnav-link[aria-current="page"]{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
  color: #fff !important;
}
.ovria-mainnav-link.ovria-active .ovria-ico,
.ovria-mainnav-link[aria-current="page"] .ovria-ico{
  color: #fff;
}
/* Subnav background ultra-light (near white) */
.ovria-subnav{
  background: #fbfcfe;
  border-bottom: 1px solid #eef2f7;
}


/* Modernize Virtualizor alert banners (e.g., insufficient balance) */
.alert,
.virt-alert,
.alert-warning,
.alert-danger,
.alert-error{
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.alert-warning{
  background: #fff7ed; /* amber-50 */
  border: 1px solid rgba(245, 158, 11, .25);
  color: #7c2d12; /* amber/brown */
  border-left: 4px solid #f59e0b;
}

.alert-danger,
.alert-error{
  background: #fff1f2; /* rose-50 */
  border: 1px solid rgba(225, 29, 72, .25);
  color: #881337; /* rose-900 */
  border-left: 4px solid #e11d48;
}

/* Make the banner feel less "bootstrap" */
.alert-warning a,
.alert-danger a,
.alert-error a{
  text-decoration: underline;
}



/* Modern Virtualizor notices (e.g., insufficient balance banner) */
.notice{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eff6ff; /* blue-50 */
  border: 1px solid rgba(37, 99, 235, .18); /* blue-600 @ 18% */
  color: #0f172a; /* slate-900 */
  border-left: 4px solid #2563eb; /* blue-600 */
  box-shadow: 0 6px 20px rgba(2, 6, 23, .06);
  line-height: 1.35;
}
.notice:before{
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .12);
  color: #1d4ed8;
  font-weight: 700;
  flex: 0 0 auto;
  margin-top: 1px;
}
.notice a{
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: underline;
}
.notice a:hover{
  text-decoration: none;
}

/* Hide Virtualizor legacy per-page headings when we promote them into the Ovria hero banner */
.ovria-hide-legacy-header{
  display: none !important;
}


/* PATCHED40: Truly pinned header stack (nav + subnav + hero)
   The previous sticky approach can fail inside some Virtualizor scroll containers,
   making the header appear to "follow" the page.
   We switch back to fixed positioning, but avoid scroll-jank by:
   - never updating layout on scroll
   - only measuring on load + resize
*/

:root{
  --ovria-header-stack: 180px; /* overwritten by JS with real measured height */
}

/* Pin the whole stack */
.ovria-topnav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
}

/* Push the page content below the pinned stack */
.ovria-page-wrap{
  padding-top: var(--ovria-header-stack) !important;
}

/* Mobile nav */
.ovria-nav-toggle{
  display:none;
  margin-left:auto;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  color:#fff;
  align-items:center;
  justify-content:center;
}
.dark .ovria-nav-toggle{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
}

@media (max-width: 860px){
  .ovria-nav-toggle{ display:inline-flex; }
  /* Turn main nav into a dropdown panel */
  .ovria-mainnav{
    position:absolute;
    top:calc(100% + 10px);
    left:14px;
    right:14px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    padding:10px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
    display:none;
    flex-direction:column;
    gap:6px;
    z-index:200;
  }
  .dark .ovria-mainnav{
    background:rgba(10,13,26,.96);
    border-color:rgba(255,255,255,.10);
  }
  /* Ensure links are readable inside the white dropdown panel on mobile.
     Desktop styles force white text inside the header; override them strongly here. */
  .ovria-topnav .ovria-mainnav a.ovria-mainnav-link,
  .ovria-topnav .ovria-mainnav button.ovria-mainnav-link,
  .ovria-mainnav .ovria-mainnav-link,
  .ovria-mainnav .ovria-mainnav-btn{
    color:#0f172a !important;
    background:transparent;
    border-color:rgba(15,23,42,.08);
  }
  .ovria-mainnav .ovria-mainnav-link:hover,
  .ovria-mainnav .ovria-mainnav-btn:hover{
    background:rgba(15,23,42,.06);
  }
  .ovria-mainnav .ovria-mainnav-link.active,
  .ovria-mainnav .ovria-mainnav-link.ovria-active,
  .ovria-mainnav .ovria-mainnav-link[aria-current="page"]{
    background:rgba(15,23,42,.10);
    color:#0f172a;
  }

  /* Dark mode inside the dropdown */
  .dark .ovria-mainnav .ovria-mainnav-link,
  .dark .ovria-mainnav .ovria-mainnav-btn{
    color:#e5e7eb;
  }
  .dark .ovria-mainnav .ovria-mainnav-link:hover,
  .dark .ovria-mainnav .ovria-mainnav-btn:hover{
    background:rgba(255,255,255,.08);
  }
  .dark .ovria-mainnav .ovria-mainnav-link.active,
  .dark .ovria-mainnav .ovria-mainnav-link.ovria-active,
  .dark .ovria-mainnav .ovria-mainnav-link[aria-current="page"]{
    background:rgba(255,255,255,.10);
    color:#fff;
  }
  .ovria-mainnav .ovria-mainnav-link.active,
  .ovria-mainnav .ovria-mainnav-btn.active{
    background:rgba(15,23,42,.10);
  }
  .dark .ovria-mainnav .ovria-mainnav-link,
  .dark .ovria-mainnav .ovria-mainnav-btn{
    color:#e5e7eb;
    border-color:rgba(255,255,255,.10);
  }
  .ovria-mainnav .ovria-mainnav-link,
  .ovria-mainnav .ovria-mainnav-btn{
    width:100%;
    justify-content:flex-start;
  }
  html.ovria-nav-open .ovria-mainnav{ display:flex; }

  /* Subnav: keep desktop height, but allow sideways scroll on small screens */
  /* Match desktop visual height; keep a touch more top room so pill outlines never clip */
  .ovria-subnav-inner{ padding:14px 18px 10px 18px; }
  .ovria-subnav-list{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    gap:8px;
    padding-bottom:2px;
    scrollbar-width: none; /* Firefox */
  }
  .ovria-subnav-list::-webkit-scrollbar{ display:none; }
  .ovria-subnav-link,
  .ovria-subnav-pill{
    white-space:nowrap;
    flex:0 0 auto;
  }

  /* Subnav hover: avoid upward nudge which can clip in tight mobile header rows */
  .ovria-subnav-link:hover,
  .ovria-subnav-pill:hover{
    transform:none;
  }

  /* Hero: tighten spacing on mobile */
  #ovriaHero .ovria-hero-inner{
    padding:14px 14px;
  }
  #ovriaHero .ovria-hero-actions{
    flex-wrap:wrap;
    gap:10px;
  }
}


/* PATCHED41: Make nav/subnav/hero non-sticky (sit in normal flow) and fix mobile nav dropdown usability */
:root{
  --ovria-header-stack: 0px !important;
  --ovria-topnav-height: 64px; /* set by JS if available */
}

/* Ensure the header stack does NOT follow the scroll */
.ovria-topnav,
.ovria-subnav,
#ovriaHero{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

/* Remove any push-down padding that was used for pinned header variants */
.ovria-page-wrap{
  padding-top: 0 !important;
}

/* Mobile: make the main nav a fixed, scrollable panel that never overlaps the header */
@media (max-width: 860px){
  .ovria-mainnav{
    position: fixed !important;
    top: calc(var(--ovria-topnav-height) + 10px) !important;
    left: 12px !important;
    right: 12px !important;
    max-height: calc(100vh - (var(--ovria-topnav-height) + 24px)) !important;
    overflow: auto !important;
    z-index: 10001 !important;
  }
  html.ovria-nav-open .ovria-mainnav{ display:flex; }

  /* Backdrop is a real DOM node inserted by JS (more reliable than html::before) */
  .ovria-nav-backdrop{
    display:none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 10000;
    /* Backdrop should never swallow clicks meant for the menu (menu sits above) */
    pointer-events: auto;
  }
  html.ovria-nav-open .ovria-nav-backdrop{ display:block; }
}

/* When the mobile nav is "portaled" to <body>, keep it visually consistent */
@media (max-width: 860px){
  .ovria-mainnav.ovria-mainnav-portal{
    /* Ensure it's above the backdrop even if moved out of the header */
    z-index: 10001 !important;
  }
}


/* ================================
   Ovria: Launch Server Location + Plan Group boxes
   ================================ */
#mainwindow .ovria-launchbox{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  padding: 14px 14px 12px;
  margin: 14px 0 18px;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  overflow: hidden;
}

/* Ensure Location and Plan Group boxes stack vertically (Virtualizor containers may be flex) */
#mainwindow #ovriaLocBox,
#mainwindow #ovriaPlanGroupBox{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
#mainwindow .ovria-launchbox-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(15,23,42,.72);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Make a proper header strip inside the box (prevents "square cut" look) */
  margin: -14px -14px 12px;
  padding: 10px 14px;
  background: rgba(11,107,255,.05);
  border-bottom: 1px solid rgba(0,0,0,.08);
  border-radius: 16px 16px 0 0;
}

/* Small inline helper text inside the box title (Available Plans) */
#mainwindow .ovria-launchbox-title .ovria-launchbox-help{
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 12.5px;
  color: rgba(15,23,42,.52);
  line-height: 1.2;
}
@media (prefers-color-scheme: dark){
  #mainwindow .ovria-launchbox-title .ovria-launchbox-help{
    color: rgba(255,255,255,.58);
  }
}

/* Optional helper line under launchbox titles (used on Available Plans) */
#mainwindow .ovria-launchbox-subtitle{
  margin: -10px -14px 12px;
  padding: 0 14px 10px;
  font-size: 13px;
  color: rgba(15,23,42,.62);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  #mainwindow .ovria-launchbox-subtitle{
    color: rgba(255,255,255,.70);
    border-bottom-color: rgba(255,255,255,.08);
  }
}
#mainwindow .ovria-launchbox-body{
  display:block;
}

/* Inline helper text used in section headers (e.g. Available Plans) */
#mainwindow .ovria-launchbox-title .ovria-launchbox-help{
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 12.5px;
  color: rgba(15,23,42,.55);
  white-space: normal;
}
@media (prefers-color-scheme: dark){
  #mainwindow .ovria-launchbox-title .ovria-launchbox-help{
    color: rgba(255,255,255,.65);
  }
}

/* Hide Virtualizor's built-in region heading so we can use our own */
#mainwindow #create .tr_regions_head{
  display:none !important;
}

/* Remove the extra "outer card" that Virtualizor's default create-page styling
   applies to the Region/Server Group flex row (because it follows a .virt-form-head).
   We provide our own Location + Plan Group boxes, so the wrapper must be neutral. */
#mainwindow #create .tr_regions_head + .flex.flex-wrap{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Location pills */
#mainwindow .ovria-locbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
#mainwindow .ovria-locbar .ovria-loc-pill{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#0f172a;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
#mainwindow .ovria-locbar .ovria-loc-flag{
  display:inline-block;
  width:22px;
  height:15px;
  border-radius:4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}

/* Location icons */
/* Use bundled PNG flags (Virtualizor's stock set) to avoid inconsistent SVG rendering */
#mainwindow .ovria-locbar .ovria-flag-london{
  background-image: url("../images/flags/gb.png");
}
#mainwindow .ovria-locbar .ovria-flag-amsterdam,
#mainwindow .ovria-locbar .ovria-flag-nl,
#mainwindow .ovria-locbar .ovria-flag-netherlands{
  background-image: url("../images/flags/nl.png");
}

/* Force Location and Plan Group boxes to stack as rows (not side-by-side) */
#mainwindow #ovriaLocBox,
#mainwindow #ovriaPlanGroupBox{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  display: block;
}
#mainwindow .ovria-locbar .ovria-loc-pill.is-active{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

@media (max-width: 640px){
  #mainwindow .ovria-locbar{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  #mainwindow .ovria-locbar::-webkit-scrollbar{ display:none; }
}

/* Plan group (server group) container tweaks */
#mainwindow #ovriaPlanGroupBox #user_regions{
  margin-top: 4px;
}
#mainwindow #ovriaPlanGroupBox #user_regions .region-card{
  border-radius: 14px;
}

/* Available Plans + Server Configuration wrappers
   We wrap the existing Virtualizor blocks inside .ovria-launchbox. Neutralize
   any nested "card" styling on the inner containers so we don't get
   duplicate boxes. */
#mainwindow #ovriaPlansBox #ihb_div,
#mainwindow #create .create_common .ovria-launchbox-body > div{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Neutralize Virtualizor's internal plans wrapper (prevents the "box inside a box" look) */
#mainwindow #ovriaPlansBox .ihb_plans_container,
#mainwindow #ovriaPlansBox #ihb_plans{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* v26i: Some Virtualizor builds wrap the plans list in an extra "panel" div
   (light background, padding, rounded corners) before the actual cards.
   Flatten any first/second-level wrappers inside the Plans box so only the
   outer Ovria container is visible. */
#mainwindow #ovriaPlansBox .ovria-launchbox-body > div,
#mainwindow #ovriaPlansBox .ovria-launchbox-body > div > div{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#mainwindow #ovriaPlansBox .ovria-launchbox-body > div{
  padding: 0 !important;
  margin: 0 !important;
}

/* Available Plans: Virtualizor wraps cards in `.ihb_plans_container` which can look like
   an extra nested panel. Neutralize that wrapper when inside our Plans box. */
#mainwindow #ovriaPlansBox .ihb_plans_container,
#mainwindow #ovriaPlansBox #ihb_plans{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Server Configuration: Virtualizor's create template wraps the OS selector and some
   sub-sections in a blue bordered card (Tailwind utility classes like
   `border-[#0075ff30] bg-[#0068fd05]`). When we move the whole block inside our
   Ovria launchbox, that inner card becomes a distracting "box inside a box".
   Neutralize it so the OS tiles blend naturally into the container. */
#mainwindow #create .create_common .border-\[\#0075ff30\],
#mainwindow #create .create_common .dark\:border-\[\#0075ff\]{
  border: 0 !important;
}
#mainwindow #create .create_common .bg-\[\#0068fd05\],
#mainwindow #create .create_common .dark\:bg-\[\#1C2037\]{
  background: transparent !important;
}
#mainwindow #create .create_common .rounded-lg{
  border-radius: 0 !important;
}
#mainwindow #create .create_common .-mt-4{ margin-top: 0 !important; }
#mainwindow #create .create_common .mx-4{ margin-left: 0 !important; margin-right: 0 !important; }
#mainwindow #create .create_common .p-4{ padding: 0 !important; }

/* Hide Virtualizor's internal plans headers inside the plans block so we only
   show the Ovria box title (prevents duplicate headings / oversized titles). */
#mainwindow #ovriaPlansBox #ihb_div > h1,
#mainwindow #ovriaPlansBox #ihb_div > h2,
#mainwindow #ovriaPlansBox #ihb_div > h3,
#mainwindow #ovriaPlansBox #ihb_div > h4,
#mainwindow #ovriaPlansBox #ihb_div .virt-form-head,
#mainwindow #ovriaPlansBox #ihb_div .tr_plans_head{
  display:none !important;
}

/* Keep spacing consistent between the wrapped inner blocks */
#mainwindow #ovriaPlansBox .ovria-launchbox-body,
#mainwindow #create .create_common .ovria-launchbox-body{
  padding-top: 2px;
}

/* ================================
   Ovria: Selected Plan/Group styling
   Make Virtualizor's selection feel more Ovria-like
   ================================ */
#mainwindow #ovriaPlanGroupBox #user_regions .region-card.selected_region{
  border-color: rgba(11,107,255,.55) !important;
  background: rgba(11,107,255,.04) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
}

/* The checkmark SVG appended by Virtualizor */
#mainwindow #ovriaPlanGroupBox #user_regions .region-card.selected_region #region_select_icon,
#mainwindow #ihb_plans .ihb_plans_container .ihb_slctd_pl #selected_plan_icon{
  width: 26px !important;
  height: 26px !important;
  top: 10px !important;
  right: 10px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: rgba(11,107,255,.10) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.10) !important;
  fill: var(--ovria-blue) !important;
}

/* Plans: selected plan card */
#mainwindow #ihb_plans .ihb_plans_container .ihb_slctd_pl{
  border-color: rgba(11,107,255,.55) !important;
  background: rgba(11,107,255,.03) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.12) !important;
}

/* Add an Ovria-style accent strip for selected items (plans + plan groups) */
#mainwindow #ovriaPlanGroupBox #user_regions .region-card.selected_region,
#mainwindow #ihb_plans .ihb_plans_container .ihb_slctd_pl{
  position: relative;
  overflow: hidden;
}
#mainwindow #ovriaPlanGroupBox #user_regions .region-card.selected_region::after,
#mainwindow #ihb_plans .ihb_plans_container .ihb_slctd_pl::after{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--ovria-blue);
  opacity: .95;
}

/* Plans: Out of Stock ([OOS]) */
#mainwindow #ihb_plans .ihb_plans_container .plan-card.ovria-oos{
  opacity: .55;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
#mainwindow #ihb_plans .ihb_plans_container .plan-card.ovria-oos:hover{
  transform: none !important;
  box-shadow: none !important;
}
#mainwindow #ihb_plans .ihb_plans_container .plan-card.ovria-oos *{
  pointer-events: none;
}
#mainwindow .ovria-oos-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 12px 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(220,38,38,.10);
  border: 1px solid rgba(220,38,38,.28);
  color: rgba(185,28,28,.95);
}
@media (prefers-color-scheme: dark){
  #mainwindow .ovria-oos-badge{
    background: rgba(248,113,113,.12);
    border-color: rgba(248,113,113,.32);
    color: rgba(254,202,202,.95);
  }
}

/* Make hover feel consistent */
#mainwindow #ovriaPlanGroupBox #user_regions .region-card:hover,
#mainwindow #ihb_plans .ihb_plans_container .plan-card:hover{
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
@media (prefers-color-scheme: dark){
  #mainwindow .ovria-launchbox{
    border-color: rgba(255,255,255,.12);
    background: rgba(17,24,39,.55);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
  }
  #mainwindow .ovria-launchbox-title{
    color: rgba(255,255,255,.75);
  }
  #mainwindow .ovria-locbar .ovria-loc-pill{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
  }
}
/* Launch Server: Location picker no-match notice */
.ovria-loc-nomatch{
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  font-size: 13px;
}
.ovria-loc-nomatch-title{
  font-weight: 700;
  margin-bottom: 4px;
}
.ovria-loc-nomatch code{
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  .ovria-loc-nomatch{
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
  }
  .ovria-loc-nomatch code{
    background: rgba(255,255,255,.10);
  }
}

/* Launch Server: Templates / ISO toggle (Ovria segmented control) */
#mainwindow #create .create_common .nav-button{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Give the two buttons a clean, consistent pill style */
#mainwindow #create .create_common .os-tab-button{
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(15,23,42,.02) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .01em;
  padding: 10px 16px !important;
  height: auto !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
}

#mainwindow #create .create_common .os-tab-button svg{
  margin: 0 !important;
  padding: 0 !important;
  height: 18px;
  width: 18px;
}

/* Active state */
#mainwindow #create .create_common .os-tab-button.active{
  border-color: rgba(0,117,255,.40) !important;
  background: rgba(0,117,255,.10) !important;
  color: rgba(0,117,255,1) !important;
}

/* Spacing between the two pills */
#mainwindow #create .create_common .nav-button > .os-tab-button + .os-tab-button{
  margin-left: 10px;
}

/* --- Ovria Create: inputs + actions (server count / hostname / root pass) --- */
#mainwindow #create .create_common .virt-input,
#mainwindow #create .create_common input[type="text"],
#mainwindow #create .create_common input[type="number"],
#mainwindow #create .create_common input[type="password"]{
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
}
#mainwindow #create .create_common .virt-input:focus,
#mainwindow #create .create_common input[type="text"]:focus,
#mainwindow #create .create_common input[type="number"]:focus,
#mainwindow #create .create_common input[type="password"]:focus{
  outline: none !important;
  border-color: rgba(0,117,255,.45) !important;
  box-shadow: 0 0 0 4px rgba(0,117,255,.12) !important;
}

/* Count +/- and password key buttons */
#mainwindow #create .create_common #vm_count_minus,
#mainwindow #create .create_common #vm_count_plus,
#mainwindow #create .create_common a[onclick*="rand_pass"]{
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(15,23,42,.04) !important;
  color: rgba(15,23,42,.88) !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
#mainwindow #create .create_common #vm_count_minus:hover,
#mainwindow #create .create_common #vm_count_plus:hover,
#mainwindow #create .create_common a[onclick*="rand_pass"]:hover{
  background: rgba(0,117,255,.08) !important;
  border-color: rgba(0,117,255,.30) !important;
}
#mainwindow #create .create_common #vm_count_minus:active,
#mainwindow #create .create_common #vm_count_plus:active,
#mainwindow #create .create_common a[onclick*="rand_pass"]:active{
  transform: translateY(1px);
}

@media (prefers-color-scheme: dark){
  #mainwindow #create .create_common .virt-input,
  #mainwindow #create .create_common input[type="text"],
  #mainwindow #create .create_common input[type="number"],
  #mainwindow #create .create_common input[type="password"]{
    border-color: rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.92) !important;
  }
  #mainwindow #create .create_common #vm_count_minus,
  #mainwindow #create .create_common #vm_count_plus,
  #mainwindow #create .create_common a[onclick*="rand_pass"]{
    border-color: rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.92) !important;
  }
  #mainwindow #create .create_common #vm_count_minus:hover,
  #mainwindow #create .create_common #vm_count_plus:hover,
  #mainwindow #create .create_common a[onclick*="rand_pass"]:hover{
    background: rgba(0,117,255,.18) !important;
    border-color: rgba(0,117,255,.45) !important;
  }
}

@media (prefers-color-scheme: dark){
  #mainwindow #create .create_common .os-tab-button{
    border-color: rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.92) !important;
  }
  #mainwindow #create .create_common .os-tab-button.active{
    border-color: rgba(0,117,255,.55) !important;
    background: rgba(0,117,255,.18) !important;
    color: rgba(191,219,254,1) !important;
  }
}
/* --- Ovria Create (Launch Server) smooth transitions --- */
#ovriaPlanGroupBox,
#ovriaPlansBox,
#ovriaServerConfigBox,
#user_regions,
#create .create_common {
  transition: opacity .18s ease;
}

/*
  While switching locations, Virtualizor rebuilds the plans/config DOM in multiple
  passes. Any partial paint causes visible flicker. We therefore *hide* only the
  dynamic areas (NOT the location box), and show a loading overlay.

  We use visibility rather than opacity so intermediate DOM changes never show
  through (even with an overlay).
*/
html.ovria-filtering #ihb_plans,
html.ovria-filtering #create #os_list,
html.ovria-filtering #create #iso_list,
html.ovria-filtering #ovriaPlanGroupBox,
html.ovria-filtering #ovriaPlansBox,
html.ovria-filtering #ovriaServerConfigBox,
html.ovria-filtering #ovriaNoPlansBox,
html.ovria-filtering #user_regions,
html.ovria-filtering #create #ihb_div {
  visibility: hidden;
  pointer-events: none;
}

/* Smooth reveal after the DOM is stable */
html.ovria-reveal #ihb_plans,
html.ovria-reveal #create #os_list,
html.ovria-reveal #create #iso_list,
html.ovria-reveal #ovriaPlanGroupBox,
html.ovria-reveal #ovriaPlansBox,
html.ovria-reveal #ovriaServerConfigBox,
html.ovria-reveal #ovriaNoPlansBox,
html.ovria-reveal #user_regions,
html.ovria-reveal #create #ihb_div {
  opacity: 0;
}


/* --- Ovria Create: improved form fields (count / hostname / root password etc) --- */
#mainwindow #create .create_common input[type="text"],
#mainwindow #create .create_common input[type="number"],
#mainwindow #create .create_common input[type="password"],
#mainwindow #create .create_common select,
#mainwindow #create .create_common textarea{
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
#mainwindow #create .create_common input[type="text"]:focus,
#mainwindow #create .create_common input[type="number"]:focus,
#mainwindow #create .create_common input[type="password"]:focus,
#mainwindow #create .create_common select:focus,
#mainwindow #create .create_common textarea:focus{
  outline: none !important;
  border-color: rgba(0,117,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,117,255,.12) !important;
  background: rgba(255,255,255,.98) !important;
}
@media (prefers-color-scheme: dark){
  #mainwindow #create .create_common input[type="text"],
  #mainwindow #create .create_common input[type="number"],
  #mainwindow #create .create_common input[type="password"],
  #mainwindow #create .create_common select,
  #mainwindow #create .create_common textarea{
    background: rgba(17,24,39,.55) !important;
    border-color: rgba(148,163,184,.22) !important;
    color: rgba(226,232,240,.98) !important;
  }
  #mainwindow #create .create_common input::placeholder,
  #mainwindow #create .create_common textarea::placeholder{
    color: rgba(148,163,184,.75) !important;
  }
}

/* Neutralise any remaining Virtualizor boxed wrapper around Templates/ISO toggle */
#mainwindow #create .create_common div[class*="border-[#0075ff"],
#mainwindow #create .create_common div[class*="border-[#0075FF"],
#mainwindow #create .create_common div[class*="bg-[#0068fd05"],
#mainwindow #create .create_common div[class*="bg-[#0068FD05"]{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* --- Ovria Create: OS tiles (Templates/ISO choices) --- */
#mainwindow #os_list .create_os{
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.92) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(2,6,23,.06) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  position: relative;
  overflow: hidden;
}

/* --- Ovria Create: OS tiles (new template picker uses #osid-box / #ps_osid-box) --- */
#mainwindow #create #osid-box,
#mainwindow #create #ps_osid-box{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px !important;
  align-items: stretch;
}
/* Remove legacy flex/wrap spacing from the container */
#mainwindow #create #osid-box.flex,
#mainwindow #create #ps_osid-box.flex{
  flex-wrap: initial !important;
}

/* Tiles: slightly smaller + allow grid to control width */
#mainwindow #create #osid-box .create_os,
#mainwindow #create #ps_osid-box .create_os{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 12px 10px !important;
  border-radius: 14px !important;
}
#mainwindow #create #osid-box .create_os img.distro_img,
#mainwindow #create #ps_osid-box .create_os img.distro_img{
  height: 54px !important;
  width: 54px !important;
}
#mainwindow #create #osid-box .create_os .distro_name,
#mainwindow #create #ps_osid-box .create_os .distro_name{
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 8px !important;
  text-transform: capitalize;
}
#mainwindow #create #osid-box .create_os select.version,
#mainwindow #create #ps_osid-box .create_os select.version{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: rgba(255,255,255,.94) !important;
}


/* Add DO-like tile chrome */
#mainwindow #create #osid-box .create_os,
#mainwindow #create #ps_osid-box .create_os{
  border: 1px solid rgba(79,93,255,.14) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.06) !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#mainwindow #create #osid-box .create_os:hover,
#mainwindow #create #ps_osid-box .create_os:hover{
  border-color: rgba(79,93,255,.28) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.10) !important;
  transform: translateY(-1px);
}
#mainwindow #create #osid-box .create_os.ovria-os-selected,
#mainwindow #create #ps_osid-box .create_os.ovria-os-selected{
  border-color: rgba(79,93,255,.55) !important;
  box-shadow: 0 0 0 2px rgba(79,93,255,.14) inset, 0 14px 32px rgba(79,93,255,.12) !important;
}

/* Version select: avoid truncation in 7-col layout */
#mainwindow #create #osid-box .create_os select.version,
#mainwindow #create #ps_osid-box .create_os select.version{
  font-size: 11px !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  padding: 8px 28px 8px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Responsive: reduce columns as space shrinks */
@media (max-width: 1400px){
  #mainwindow #create #osid-box,
  #mainwindow #create #ps_osid-box{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1200px){
  #mainwindow #create #osid-box,
  #mainwindow #create #ps_osid-box{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  #mainwindow #create #osid-box,
  #mainwindow #create #ps_osid-box{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  #mainwindow #create #osid-box,
  #mainwindow #create #ps_osid-box{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#mainwindow #os_list .create_os:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(2,6,23,.10) !important;
}
#mainwindow #os_list .create_os.active,
#mainwindow #os_list .create_os[aria-selected="true"]{
  border-color: rgba(0,117,255,.55) !important;
  background: rgba(0,117,255,.05) !important;
}
#mainwindow #os_list .create_os.active::before,
#mainwindow #os_list .create_os[aria-selected="true"]::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background: var(--ovria-blue);
  opacity:.95;
}
@media (prefers-color-scheme: dark){
  #mainwindow #os_list .create_os{
    background: rgba(17,24,39,.55) !important;
    border-color: rgba(148,163,184,.22) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
  }
  #mainwindow #os_list .create_os.active,
  #mainwindow #os_list .create_os[aria-selected="true"]{
    background: rgba(0,117,255,.10) !important;
    border-color: rgba(0,117,255,.55) !important;
  }
}

/* Smooth location transitions when plans are loading */
html.ovria-plans-loading #mainwindow #create .create_common,
html.ovria-plans-loading #mainwindow #create #ihb_div,
html.ovria-plans-loading #mainwindow #create #ihb_plans,
html.ovria-plans-loading #mainwindow #create #user_regions{
  /* TEMP: loader/auto-hide disabled */
  opacity: 1 !important;
  pointer-events: auto !important;
}
#mainwindow #create .create_common,
#mainwindow #create #ihb_div,
#mainwindow #create #ihb_plans,
#mainwindow #create #user_regions{
  transition: opacity .18s ease;
}


/* --- Ovria No Plans box (under locations) --- */
#ovriaNoPlansBox .ovria-noplans-inner{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#ovriaNoPlansBox .ovria-noplans-title{
  font-size:14px;
  font-weight:700;
  color:#111827;
}
#ovriaNoPlansBox .ovria-noplans-desc{
  font-size:13px;
  line-height:1.45;
  color:#4b5563;
}
@media (prefers-color-scheme: dark){
  #ovriaNoPlansBox .ovria-noplans-title{ color:#f9fafb; }
  #ovriaNoPlansBox .ovria-noplans-desc{ color:#d1d5db; }
}

/* --- Ovria-friendly hint shown inside the Available Plans container when no plans can be shown yet --- */
#ihb_no_pl.ovria-noplans,
#lb_ihb_no_pl.ovria-noplans{
  display:block;
  padding: 14px 16px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 8px 20px rgba(2,6,23,.06) !important;
}
#ihb_no_pl.ovria-noplans .ovria-noplans-title,
#lb_ihb_no_pl.ovria-noplans .ovria-noplans-title{
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}
#ihb_no_pl.ovria-noplans .ovria-noplans-desc,
#lb_ihb_no_pl.ovria-noplans .ovria-noplans-desc{
  font-size: 13px;
  color: #475569;
  margin-top: 4px;
}
@media (prefers-color-scheme: dark){
  #ihb_no_pl.ovria-noplans,
  #lb_ihb_no_pl.ovria-noplans{
    background: rgba(17,24,39,.55) !important;
    border-color: rgba(148,163,184,.18) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
  }
  #ihb_no_pl.ovria-noplans .ovria-noplans-title,
  #lb_ihb_no_pl.ovria-noplans .ovria-noplans-title{ color:#f8fafc; }
  #ihb_no_pl.ovria-noplans .ovria-noplans-desc,
  #lb_ihb_no_pl.ovria-noplans .ovria-noplans-desc{ color:#cbd5e1; }
}

/* ================================================
   Ovria: Launch Server polish pass (A–E)
   - Location selector prominence
   - Server Ranges cards
   - Available Plans cards
   - OS tiles consistency
   - Server configuration form polish
   ================================================ */

/* A) Location selector: slightly more prominent pills + bigger flags */
#mainwindow #ovriaLocBox .ovria-launchbox-body{ padding-top: 4px; }
#mainwindow .ovria-locbar{ gap: 12px; }
#mainwindow .ovria-locbar .ovria-loc-pill{
  padding: 11px 16px;
  font-weight: 800;
  border-color: rgba(15,23,42,.14);
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
#mainwindow .ovria-locbar .ovria-loc-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(0,117,255,.28);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}
#mainwindow .ovria-locbar .ovria-loc-pill.is-active{
  background: rgba(11,107,255,.08);
  border-color: rgba(11,107,255,.40);
  box-shadow: 0 0 0 4px rgba(11,107,255,.14), 0 12px 26px rgba(2,6,23,.12);
}
#mainwindow .ovria-locbar .ovria-loc-flag{
  width: 26px;
  height: 18px;
  border-radius: 5px;
}

@media (prefers-color-scheme: dark){
  #mainwindow .ovria-locbar .ovria-loc-pill{
    background: rgba(17,24,39,.62);
    border-color: rgba(148,163,184,.22);
    color: rgba(226,232,240,.98);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
  }
  #mainwindow .ovria-locbar .ovria-loc-pill:hover{
    border-color: rgba(0,117,255,.40);
    box-shadow: 0 14px 32px rgba(0,0,0,.35);
  }
  #mainwindow .ovria-locbar .ovria-loc-pill.is-active{
    background: rgba(0,117,255,.18);
    border-color: rgba(0,117,255,.55);
    box-shadow: 0 0 0 4px rgba(0,117,255,.18), 0 14px 34px rgba(0,0,0,.38);
  }
}

/* B) Server Ranges: match Location pill styling */
#mainwindow #ovriaPlanGroupBox #user_regions > div.flex{
  padding: 0 !important;
  gap: 10px !important;
}
#mainwindow #ovriaPlanGroupBox #user_regions .region-card{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  color: #0f172a;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  box-shadow: 0 8px 20px rgba(2,6,23,.06) !important;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  position: relative;
  overflow: visible;
}
#mainwindow #ovriaPlanGroupBox #user_regions .region-card:hover{
  transform: translateY(-1px);
  border-color: rgba(0,117,255,.30) !important;
  box-shadow: 0 12px 28px rgba(2,6,23,.10) !important;
}
#mainwindow #ovriaPlanGroupBox #user_regions .region-card .region-flag{
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#mainwindow #ovriaPlanGroupBox #user_regions .region-card .region-flag svg{
  width: 24px;
  height: 24px;
}
#mainwindow #ovriaPlanGroupBox #user_regions .region-card .region-info{
  padding: 0 !important;
}

/* Selected state mirrors Location pills */
#mainwindow #ovriaPlanGroupBox #user_regions .region-card.selected_region{
  background: rgba(0,117,255,.10) !important;
  border-color: rgba(0,117,255,.45) !important;
  box-shadow: 0 0 0 4px rgba(0,117,255,.14), 0 14px 34px rgba(2,6,23,.10) !important;
}
#mainwindow #ovriaPlanGroupBox #user_regions .region-card #region_select_icon{
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
}

@media (prefers-color-scheme: dark){
  #mainwindow #ovriaPlanGroupBox #user_regions .region-card{
    background: rgba(17,24,39,.62) !important;
    border-color: rgba(148,163,184,.22) !important;
    color: rgba(226,232,240,.98) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
  }
  #mainwindow #ovriaPlanGroupBox #user_regions .region-card:hover{
    border-color: rgba(0,117,255,.40) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.35) !important;
  }
  #mainwindow #ovriaPlanGroupBox #user_regions .region-card.selected_region{
    background: rgba(0,117,255,.18) !important;
    border-color: rgba(0,117,255,.55) !important;
    box-shadow: 0 0 0 4px rgba(0,117,255,.18), 0 14px 34px rgba(0,0,0,.38) !important;
  }
}

/* C) Available Plans: base card styling (selected/OOS rules already exist above) */
#mainwindow #ihb_plans .ihb_plans_container{
  /* The plan cards are now direct children (we removed Virtualizor's extra flex wrapper div).
     Make this container the layout wrapper to avoid a nested "container within a container" look. */
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 16px 10px;
}

#mainwindow #ihb_plans .ihb_plans_container .plan-card{
  border: 1px solid rgba(15,23,42,.12) !important;
  background: rgba(255,255,255,.94) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(2,6,23,.06) !important;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  overflow: hidden;
}
#mainwindow #ihb_plans .ihb_plans_container .plan-card:hover{
  transform: translateY(-1px);
  border-color: rgba(0,117,255,.22) !important;
}
@media (prefers-color-scheme: dark){
  #mainwindow #ihb_plans .ihb_plans_container .plan-card{
    background: rgba(17,24,39,.60) !important;
    border-color: rgba(148,163,184,.22) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
  }
}

/* D) OS tiles: tighten spacing + consistent typography */
#mainwindow #create #os_list{ gap: 12px !important; }
#mainwindow #os_list .create_os{ min-height: 74px; }
#mainwindow #os_list .create_os .os_name,
#mainwindow #os_list .create_os .distro_name{
  font-weight: 800;
}

/* E) Server configuration: nicer labels + section spacing */
#mainwindow #create .create_common label{
  font-weight: 800 !important;
  color: rgba(15,23,42,.78) !important;
}
#mainwindow #create .create_common small,
#mainwindow #create .create_common .help-block,
#mainwindow #create .create_common .text-gray-500,
#mainwindow #create .create_common .text-slate-500{
  color: rgba(100,116,139,.92) !important;
}
#mainwindow #create .create_common .create_row,
#mainwindow #create .create_common .form-group{
  margin-bottom: 14px;
}
@media (prefers-color-scheme: dark){
  #mainwindow #create .create_common label{ color: rgba(226,232,240,.90) !important; }
  #mainwindow #create .create_common small,
  #mainwindow #create .create_common .help-block,
  #mainwindow #create .create_common .text-gray-500,
  #mainwindow #create .create_common .text-slate-500{
    color: rgba(203,213,225,.86) !important;
  }
}


/* =========================
   OVRIA: Launch Server finishing touches
   ========================= */

/* Remove any remaining inner "card" wrappers within Available Plans */
#mainwindow #ovriaPlansBox #ihb_div > div{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Create Server primary button */
#mainwindow #create .ovria-create-server-btn{
  /* Hidden by default; shown only once location + range + plan are selected */
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.92);
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* Safety: hide the underlying create submit until ready (prevents initial flash before JS adds class) */
#mainwindow #create #the_creator{ display:none; }
html.ovria-can-create #mainwindow #create #the_creator{ display: inline-flex; }

/* Gate the deploy button until the user is ready */
html.ovria-can-create #mainwindow #create .ovria-create-server-btn{
  display: inline-flex;
}

#mainwindow #create .ovria-create-server-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

#mainwindow #create .ovria-create-server-btn:active{
  transform: translateY(0px);
}

/* Dark mode variant */
html.dark #mainwindow #create .ovria-create-server-btn{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.94);
  color: rgba(0,0,0,.92) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* Inline Create validation errors (Ovria style) */
#mainwindow #create #ovriaCreateErrors{
  margin: 14px auto 10px;
  max-width: 760px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(239,68,68,.22);
  background: rgba(239,68,68,.08);
  color: rgba(17,24,39,.92);
  text-align: left;
}

html.dark #mainwindow #create #ovriaCreateErrors{
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.12);
  color: rgba(243,244,246,.95);
}

#mainwindow #create #ovriaCreateErrors .ovria-ce-title{
  font-weight: 750;
  margin-bottom: 8px;
}

#mainwindow #create #ovriaCreateErrors .ovria-ce-list{
  margin: 0;
  padding-left: 18px;
}

#mainwindow #create #ovriaCreateErrors .ovria-ce-list li{
  margin: 6px 0;
}



/* Subsections inside Server Configuration (e.g., Automation, Firewall, User) */
#mainwindow #ovriaServerConfigBox .ovria-subsection{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}

html.dark #mainwindow #ovriaServerConfigBox .ovria-subsection{
  border-top-color: rgba(255,255,255,.10);
}

#mainwindow #ovriaServerConfigBox .ovria-subsection-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 10px 0;
  color: rgba(0,0,0,.70);
}

html.dark #mainwindow #ovriaServerConfigBox .ovria-subsection-title{
  color: rgba(255,255,255,.78);
}

/* Make Firewall/User section headings blend with Ovria flow */
#mainwindow #ovriaServerConfigBox h6.virt-form-head{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 18px 0 10px 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  color: rgba(0,0,0,.70) !important;
}

html.dark #mainwindow #ovriaServerConfigBox h6.virt-form-head{
  color: rgba(255,255,255,.78) !important;
}

#mainwindow #ovriaServerConfigBox #tr_fwid .mb-3,
#mainwindow #ovriaServerConfigBox .user.create_common .lg\:w-6\/12{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Select2 / chosen inputs in Server Configuration: recipes, firewall plans, user, etc. */
#mainwindow #create .create_common select,
#mainwindow #create .create_common .chosen-container-single .chosen-single,
#mainwindow #create .create_common .select2-container .select2-selection{
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}

html.dark #mainwindow #create .create_common select,
html.dark #mainwindow #create .create_common .chosen-container-single .chosen-single,
html.dark #mainwindow #create .create_common .select2-container .select2-selection{
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
}


/* Launch Server: Additional Options (Recipes / Firewall / User) */
#ovriaExtrasBox .ovria-launchbox-body{ padding-top: 14px; }
.ovria-extras-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 1024px){
  .ovria-extras-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ovria-extras-card{
  border: 1px solid var(--ovria-border);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  overflow: hidden;
}
html.dark .ovria-extras-card{
  background: rgba(28,32,55,.65);
  border-color: rgba(148,163,184,.18);
}
.ovria-extras-card-title{
  padding: 12px 14px;
  font-weight: 700;
  color: #0b1320;
  border-bottom: 1px solid var(--ovria-border);
}
html.dark .ovria-extras-card-title{
  color: #e5e7eb;
  border-bottom-color: rgba(148,163,184,.18);
}
.ovria-extras-card-body{
  padding: 14px;
}
#ovriaExtrasBox .virt-select,
#ovriaExtrasBox .select2-container--default .select2-selection--multiple,
#ovriaExtrasBox .select2-container--default .select2-selection--single{
  border-radius: 12px !important;
}

/* Ensure selects inside the 3-up extras grid always fill the card width */
#ovriaExtrasBox select,
#ovriaExtrasBox .select2-container,
#ovriaExtrasBox .chosen-container{
  width: 100% !important;
  max-width: 100% !important;
}

#ovriaExtrasBox .select2-container{ display: block !important; }

/* Strip any leftover Virtualizor inner wrappers inside the extras cards */
#ovriaExtrasBox .ovria-extras-card-body .create_common,
#ovriaExtrasBox .ovria-extras-card-body .row,
#ovriaExtrasBox .ovria-extras-card-body .col,
#ovriaExtrasBox .ovria-extras-card-body [class*="col-"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#ovriaExtrasBox .ovria-extras-card-body .select2-container--default .select2-selection--single{
  width: 100% !important;
}

/* PATCH106-rollback fixes (from PATCH105 base)
   - prevent horizontal overflow / floating containers
   - make Select2 placeholders visible pre-click
   - constrain Select2 dropdown width
*/
html, body{ overflow-x: hidden !important; }

/* If any rogue element tries to exceed viewport, clamp it */
#mainwindow, .windows, .khidki, .tabwindow{ max-width: 100% !important; }

/* Select2 dropdown can sometimes create a giant offscreen box; clamp it */
.select2-container{ max-width: 100% !important; }
.select2-dropdown{ max-width: calc(100vw - 24px) !important; }

/* Placeholder LI injected for multi-selects */
#ovriaExtrasBox .ovria-s2-placeholder{
  color: rgba(15, 23, 42, 0.65);
}
html.dark #ovriaExtrasBox .ovria-s2-placeholder{
  color: rgba(226, 232, 240, 0.65);
}

/* Ensure the Select2 rendered area never collapses (helps the "no dropdown" feel) */
#ovriaExtrasBox .select2-container--default .select2-selection--multiple .select2-selection__rendered{
  min-height: 44px;
}



/* ===== PATCH105 SAFE CSS HOTFIX (no index.html changes) ===== */

/* 1) Hide bluish empty "misc" container above Create Server (common culprit) */
#misc-tab,
#misc_tab,
#miscTab {
  display: none !important;
}

/* 2) Prevent massive horizontal overflow / floating grey artifacts */
html, body { overflow-x: hidden !important; }
#mainwindow, .windows, .khidki, .tabwindow, #create, .create, .container, .container-fluid, .row {
  max-width: 100% !important;
}

/* 3) Select2: keep dropdowns from creating layout blowouts */
.select2-container { max-width: 100% !important; }
.select2-dropdown { max-width: 100% !important; }

/* 4) Recipes placeholder behaviour: hide placeholder when focused/open so typing doesn't appear under it */
.select2-container--open li.ovria-s2-placeholder,
.select2-container--focus li.ovria-s2-placeholder{
  display: none !important;
}

/* 5) Restore "corner" styling on select2 selections inside Extras cards */
#ovriaExtrasBox .select2-container--default .select2-selection--single,
#ovriaExtrasBox .select2-container--default .select2-selection--multiple,
#ovriaExtrasBox select.virt-select{
  border-radius: 16px !important;
  overflow: hidden;
}

/* subtle corner/glow accents (safe, minimal) */
#ovriaExtrasBox .select2-container--default .select2-selection--single,
#ovriaExtrasBox .select2-container--default .select2-selection--multiple{
  box-shadow: 0 0 0 1px rgba(59,130,246,.18) inset, 0 8px 18px rgba(15,23,42,.06);
}

/* 6) Make Recipes/User headings match Firewall heading style (text + rule line) */
.ovria-extras-card-title{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 0 !important;
  padding: 12px 14px !important;
}
.ovria-extras-card-title:after{
  content: "";
  height: 1px;
  background: var(--ovria-border);
  flex: 1 1 auto;
  opacity: .95;
}
html.dark .ovria-extras-card-title:after{
  background: rgba(148,163,184,.18);
}

/* 7) Firewall select fallback: if Select2 hides the native select and init fails, show the native select */
#li_fwid.select2-hidden-accessible{
  position: static !important;
  width: 100% !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* 8) Remove large grey space under footer (defensive) */
#footer, .footer { margin-bottom: 0 !important; padding-bottom: 0 !important; }
body { padding-bottom: 0 !important; }




/* ===== PATCH105 v5 CSS tweaks (headers + remove inner labels + grey floater) ===== */

/* A) Extras card titles: use true underline (like packages headings) */
.ovria-extras-card-title{
  width: 100% !important;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, .10);
}
html.dark .ovria-extras-card-title{
  border-bottom-color: rgba(148,163,184,.18);
}
/* Keep the old pseudo-line from stretching oddly */
.ovria-extras-card-title:after{
  content: none !important;
}

/* B) Remove the extra small grey labels above dropdowns for Recipes + Users */
.ovria-extras-card[data-ovria-extras="recipes"] .virt-label,
.ovria-extras-card[data-ovria-extras="users"] .virt-label{
  display: none !important;
}
.ovria-extras-card[data-ovria-extras="recipes"] .pb-2,
.ovria-extras-card[data-ovria-extras="users"] .pb-2{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* C) Select2 "floating grey container" / runaway dropdown artifacts */
.select2-dropdown{
  position: absolute !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.select2-results{
  max-height: 280px !important;
  overflow-y: auto !important;
}
.select2-container--open .select2-dropdown{
  z-index: 999999 !important;
}
body > .select2-container{
  max-width: calc(100vw - 24px) !important;
}

/* D) Remove unexplained bottom whitespace under footer */
body:after{
  content: "" !important;
  display: block !important;
  height: 0 !important;
}



/* ===== PATCH105 v6 CSS refinements (headers line, remove inner User label, tighten spacing, footer space) ===== */

/* 1) Extras card headings: match launchbox header strip + underline */
.ovria-extras-card-title{
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.72) !important;
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  background: rgba(11,107,255,.05) !important;
  border-bottom: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 16px 16px 0 0 !important;
}
html.dark .ovria-extras-card-title{
  color: rgba(226,232,240,.82) !important;
  background: rgba(11,107,255,.10) !important;
  border-bottom-color: rgba(148,163,184,.18) !important;
}

/* 2) Tighten spacing inside the cards */
.ovria-extras-card-body{
  padding: 10px 14px 12px !important;
}
.ovria-extras-card-body .form-group,
.ovria-extras-card-body .form-group.row{
  margin-top: 0 !important;
}
.ovria-extras-card-body .pb-2{
  padding-bottom: 0 !important;
}

/* 3) Remove the small grey "Users" (and "Recipes") label above the dropdowns inside card bodies */
.ovria-extras-card[data-ovria-extras="users"] .ovria-extras-card-body .virt-label,
.ovria-extras-card[data-ovria-extras="users"] .ovria-extras-card-body .control-label,
.ovria-extras-card[data-ovria-extras="users"] .ovria-extras-card-body label,
.ovria-extras-card[data-ovria-extras="users"] .ovria-extras-card-body .text-muted,
.ovria-extras-card[data-ovria-extras="recipes"] .ovria-extras-card-body .virt-label,
.ovria-extras-card[data-ovria-extras="recipes"] .ovria-extras-card-body .control-label,
.ovria-extras-card[data-ovria-extras="recipes"] .ovria-extras-card-body label,
.ovria-extras-card[data-ovria-extras="recipes"] .ovria-extras-card-body .text-muted{
  display: none !important;
}

/* 4) Ensure Select2 dropdown never creates extra document flow space */
.select2-dropdown,
.select2-container--open .select2-dropdown{
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
}
.select2-container{
  display: block !important;
}
.select2-container--default .select2-dropdown{
  box-sizing: border-box !important;
}

/* 5) Kill any lingering bottom whitespace after footer (defensive) */
body, #mainwindow, #wrapper, .wrapper, main{
  height: auto !important;
  min-height: 0 !important;
}
#footer, .footer{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove the empty bluish adv-options container that can remain above Create Server */
#create #misc-tab{ display:none !important; }



/* ===== PATCH105 v7 tweaks (extras placeholder + user label + footer whitespace) ===== */

/* Recipes (Select2 multi): show closed placeholder before click (no overlap when typing) */
#recipe + .select2-container .select2-selection--multiple ul.select2-selection__rendered > li.select2-search:only-child::before{
  content: "Please select preferred recipe";
  opacity: 0.65;
  margin-left: 0;
  line-height: 46px;
  pointer-events: none;
  display: block;
}
#recipe + .select2-container.select2-container--open .select2-selection--multiple ul.select2-selection__rendered > li.select2-search:only-child::before{
  content: "";
}
/* Hide the search input placeholder text in the dropdown (user doesn't need it) */
#recipe + .select2-container .select2-search__field::placeholder{
  opacity: 0 !important;
}

/* Remove the small inner "User" label right above the user dropdown (inside extras cards) */
#ovriaExtrasBox .tr_uid .virt-label{ display: none !important; }

/* Also hide the custom label added by the rebuild ("User") */
#ovriaExtrasBox .ovria-extras-card[data-ovria-extras="user"] .ovria-field-label{ display:none !important; }

/* Aggressively clamp any layout min-heights/padding that can create blank space below footer */
#mainwindow, .windows, .khidki, .tabwindow, .content, main{
  min-height: unset !important;
  padding-bottom: 0 !important;
}
#mainwindow::after, body::after{ content: none !important; display:none !important; }

/* ===== PATCH105 v10: backdrop + footer spacing + remove empty advopt strip ===== */

/* Ensure the nav backdrop never affects document flow on desktop.
   Only enable it for mobile; on desktop it must stay hidden even if html.ovria-nav-open is left behind. */
.ovria-nav-backdrop{
  display:none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.35);
  z-index: 10000 !important;
  pointer-events: auto;
}
/* Only show backdrop on mobile when nav is open */
@media (max-width: 860px){
  html.ovria-nav-open .ovria-nav-backdrop{ display:block !important; }
}

/* Add breathing room between Create Server CTA and footer */
#create #the_creator{ margin-bottom: 24px !important; }

/* Prevent any accidental extra space after footer */
body{ padding-bottom: 0 !important; }
#footer, .footer, footer{ margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Hide ONLY truly-empty advanced options strip (common source of the thin bluish bar) */
#create .advopt-tabs:empty{ display:none !important; }

/* If an empty spacer row is left between Additional Options and the CTA, hide it */
#ovriaExtrasBox + div:empty{ display:none !important; }


/* PATCH105 v12: Create button spacing + prevent phantom bottom gap */
#create #the_creator{ margin-bottom: 32px !important; }
#footer, .footer, footer{ padding-top: 10px !important; }


/* ===== PATCH105 v14: eliminate any desktop grey "backdrop slab" completely ===== */
.ovria-nav-backdrop{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,.35);
  pointer-events: none !important;
}
@media (min-width: 861px){
  .ovria-nav-backdrop{ display:none !important; opacity:0 !important; visibility:hidden !important; }
  html.ovria-nav-open .ovria-nav-backdrop{ display:none !important; }
}
@media (max-width: 860px){
  html.ovria-nav-open .ovria-nav-backdrop{
    display:block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}



/* === Ovria: Launch Server phantom grey space fix (scoped to act=create) ===
   Symptom: after selecting a Server Range, page gains large blank scroll area showing body background.
   Cause (likely): fixed/viewport height wrappers + overflow-y-auto scroll container interacting with Virtualizor AJAX reflow.
   Fix: on create page only, let the main content wrapper size to content (auto), and avoid nested scrolling. */
html.ovria-act-create body .ovria-page-wrap{
  height: auto !important;
  min-height: 0 !important;
}
html.ovria-act-create body .flex.md\:h-\[calc\(100vh\)\],
html.ovria-act-create body .flex.md\:h-\[calc\(100vh-80px\)\]{
  height: auto !important;
  min-height: 0 !important;
}
html.ovria-act-create body .flex.md\:h-\[calc\(100vh\)\].overflow-y-auto{
  overflow-y: visible !important;
}
html.ovria-act-create body .flex.md\:h-\[calc\(100vh\)\].overflow-hidden{
  overflow: visible !important;
}
/* Ensure footer area doesn't inherit extra height from flex parents */
html.ovria-act-create body .ovria-page-wrap > footer,
html.ovria-act-create body footer,
html.ovria-act-create body #footer{
  flex: 0 0 auto !important;
}

/* Launch Server: Virtualizor may unhide this wrapper after selecting a server range.
   We don't use the built-in Enhanced System Configuration accordion in Ovria, and it
   can appear as an empty bluish bar above the Create Server button. */
html.ovria-act-create #create #adv_options{
  display: none !important;
}


/* OVRIA: Launch Server - remove Virtualizor default banner on create page */
#create .eu-page-header{ display:none !important; }



/* === Ovria Launch Server: Plan Cards (Vultr/DO-style) === */
/* Scopes to create page to avoid impacting other views */
#vbody.act_create #ihb_div .plan-card,
body.act_create #ihb_div .plan-card,
#ihb_div .plan-card{
  border: 1px solid rgba(0,117,255,.18);
  background: rgba(0,104,253,.03);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-width: 260px;
}

#ihb_div .plan-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08), 0 0 0 1px rgba(0,117,255,.08) inset;
  border-color: rgba(0,117,255,.35);
}

#ihb_div .plan-card-head{
  background: #fff;
  border-bottom: 1px solid rgba(0,117,255,.12);
}
.dark #ihb_div .plan-card-head{
  background: #101224;
}

#ihb_div .plan-card-h3{
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* Plan card body layout: price row then metrics grid (full width)
   This avoids the awkward 50/50 split and keeps metrics aligned. */
#ihb_div .ovria-plan-card-body{
  padding: 10px 12px 12px;
}
#ihb_div .ovria-plan-pricewrap{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
#ihb_div .ovria-price-line{
  display: flex;
  align-items: baseline;
  gap: 8px;
}
#ihb_div .ovria-price-sep{
  opacity: .35;
  font-weight: 700;
}
#ihb_div .ovria-plan-pricewrap .justify-center{
  align-items: flex-start !important;
}
#ihb_div .plan-card-sm.ovria-plan-specsrc{
  width: 100%;
}

#ihb_div .plan-mrate{
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}
#ihb_div .plan-hrate{
  font-size: .78rem !important;
  opacity: .70;
  font-weight: 600;
  white-space: nowrap;
}

/* Replace icon rows with compact metric blocks (rendered by JS) */
#ihb_div .ovria-metrics{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
}

#ihb_div .ovria-metric{
  border: 1px solid rgba(0,117,255,.14);
  background: rgba(0,104,253,.02);
  border-radius: 12px;
  padding: 10px 10px 9px;
  line-height: 1.05;
}

.dark #ihb_div .ovria-metric{
  background: rgba(28,32,55,.35);
  border-color: rgba(255,255,255,.08);
}

#ihb_div .ovria-metric-val{
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#ihb_div .ovria-metric-lbl{
  margin-top: 4px;
  font-size: .78rem;
  opacity: .72;
  font-weight: 500;
}


/* === Ovria Launch Server: SSH Keys section polish === */
html.ovria-act-create #create .create_common.disable_eu_sshkeys{
  margin: 14px 16px 18px;
  padding: 14px 14px 10px;
  border: 1px solid rgba(0,117,255,.12);
  background: #fff;
  border-radius: 16px;
}
.dark html.ovria-act-create #create .create_common.disable_eu_sshkeys,
html.ovria-act-create.dark #create .create_common.disable_eu_sshkeys,
.dark html.ovria-act-create #create .create_common.disable_eu_sshkeys{
  background: #101224;
  border-color: rgba(255,255,255,.08);
}

html.ovria-act-create #create .create_common.disable_eu_sshkeys > .flex.justify-center{
  justify-content: flex-start !important;
  margin: 0 !important;
}

html.ovria-act-create #create .create_common.disable_eu_sshkeys .nav-button{
  border-radius: 14px !important;
  overflow: hidden;
  border-color: rgba(0,117,255,.18) !important;
  background: rgba(0,104,253,.03);
}

html.ovria-act-create #create .create_common.disable_eu_sshkeys .sshkeys-tab-button{
  background: transparent !important;
  border: 0 !important;
  color: #2b3350;
  font-weight: 650;
}

.dark html.ovria-act-create #create .create_common.disable_eu_sshkeys .sshkeys-tab-button{
  color: #e6e9ff;
}

html.ovria-act-create #create .create_common.disable_eu_sshkeys .sshkeys-tab-button.active{
  background: rgba(0,117,255,.10) !important;
}

html.ovria-act-create #create .create_common.disable_eu_sshkeys .sshkeys-tab-content{
  margin-top: 12px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(0,117,255,.12) !important;
}
.dark html.ovria-act-create #create .create_common.disable_eu_sshkeys .sshkeys-tab-content{
  background: rgba(28,32,55,.55) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Ovria-style SSH keys empty state */
html.ovria-act-create #create .ovria-empty{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,117,255,.14);
  background: rgba(0,104,253,.03);
}
html.ovria-act-create #create .ovria-empty .ovria-empty-ico{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(0,117,255,.12);
  color: #0075ff;
}
html.ovria-act-create #create .ovria-empty .ovria-empty-title{
  font-weight: 750;
  margin: 0 0 4px;
}
html.ovria-act-create #create .ovria-empty .ovria-empty-desc{
  margin: 0;
  opacity: .78;
  line-height: 1.4;
}
html.ovria-act-create #create .ovria-empty .ovria-empty-actions{
  margin-top: 10px;
}
html.ovria-act-create #create .ovria-empty .ovria-empty-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,117,255,.22);
  background: rgba(0,117,255,.10);
  color: #0c3b7a;
  font-weight: 700;
}
.dark html.ovria-act-create #create .ovria-empty{
  background: rgba(28,32,55,.45);
  border-color: rgba(255,255,255,.08);
}
.dark html.ovria-act-create #create .ovria-empty .ovria-empty-btn{
  color: #e6e9ff;
}


/* === Ovria: Dropdown menu roundness (Select2 + Chosen) === */
.select2-container--default .select2-dropdown{
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(0,117,255,.18) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  border-radius: 12px !important;
}
.select2-container--default .select2-results__option{
  border-radius: 10px;
  margin: 4px 6px;
}

.chosen-container .chosen-drop{
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(0,117,255,.18) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.chosen-container .chosen-results li{
  border-radius: 10px;
  margin: 4px 6px;
}
.chosen-container .chosen-search input{
  border-radius: 12px !important;
}

html.ovria-act-create #create .create_common.disable_eu_sshkeys .sshkeys-tab-button{
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px !important;
  background: transparent;
}

html.ovria-act-create #create .create_common.disable_eu_sshkeys .sshkeys-tab-button.active,
html.ovria-act-create #create .create_common.disable_eu_sshkeys .sshkeys-tab-button:focus{
  background: rgba(0,117,255,.10);
}

html.ovria-act-create #create .create_common.disable_eu_sshkeys .sshkeys-tab-content{
  margin-top: 12px !important;
  border-radius: 16px !important;
  border-color: rgba(0,117,255,.12) !important;
  background: rgba(0,104,253,.02) !important;
}

/* === Ovria Launch Server: Rounded dropdown menus (Select2 + Chosen) === */
.select2-container--default .select2-dropdown{
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(0,117,255,.18) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

.select2-container--default .select2-search--dropdown .select2-search__field{
  border-radius: 10px !important;
  border-color: rgba(0,117,255,.20) !important;
}

.select2-container--default .select2-results__option{
  padding: 10px 12px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background: rgba(0,117,255,.10) !important;
  color: inherit !important;
}

.chosen-container .chosen-drop{
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(0,117,255,.18) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

.chosen-container .chosen-search input{
  border-radius: 10px !important;
}

.chosen-container .chosen-results li.highlighted{
  background: rgba(0,117,255,.10) !important;
  color: inherit !important;
}

/* Hide legacy Virtualizor spec rows/icons (JS will insert metrics) */
#ihb_div .plan-card-sm svg,
#ihb_div .plan-card-sm .fa,
#ihb_div .plan-card-sm .flex.gap-3.items-center{
  display: none !important;
}

/* Selected plan state */
#ihb_div .plan-card.plan_selected,
#ihb_div .plan-card.ihb_selected,
#ihb_div .plan-card.active{
  border-color: rgba(0,117,255,.55) !important;
  box-shadow: 0 14px 30px rgba(0,117,255,.14), 0 0 0 2px rgba(0,117,255,.10) inset;
}

/* Make the plan list feel like cards grid */
#ihb_plans .flex.flex-row.flex-wrap{
  gap: 16px !important;
}

/* Selected plan summary (above Create button) */
#ovriaPlanSummary{
  margin: 12px 16px 6px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: rgba(0,104,253,.03);
}
.dark #ovriaPlanSummary{
  border-color: rgba(255,255,255,.12);
  background: rgba(28,32,55,.35);
}
#ovriaPlanSummary .ovria-ps-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 6px;
}
#ovriaPlanSummary .ovria-ps-main{
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
#ovriaPlanSummary .ovria-ps-sub{
  font-size: 13px;
  opacity: .75;
  line-height: 1.35;
}

/* CTA button inside create stays consistent */


/* v26f: Available Plans - remove nested inner container feel */
#mainwindow #ovriaPlansBox #ihb_div,
#mainwindow #ovriaPlansBox #ihb_plans{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#mainwindow #ovriaPlansBox .ihb_plans_container.row{
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* v26g: In some builds, the plans grid is wrapped in a `.bg` utility container,
   which creates a "container inside a container" look. Flatten it only within
   Available Plans. */
#mainwindow #ovriaPlansBox .bg{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* v26h: Some builds wrap plans in Tailwind utility "cards" which create a nested
   container look. Flatten those wrappers only inside Available Plans. */
#mainwindow #ovriaPlansBox .border-\[\#0075ff30\],
#mainwindow #ovriaPlansBox .dark\:border-\[\#0075ff\]{
  border: 0 !important;
}
#mainwindow #ovriaPlansBox .bg-\[\#0068fd05\],
#mainwindow #ovriaPlansBox .dark\:bg-\[\#1C2037\]{
  background: transparent !important;
}
#mainwindow #ovriaPlansBox .rounded-lg{ border-radius: 0 !important; }
#mainwindow #ovriaPlansBox .-mt-4{ margin-top: 0 !important; }
#mainwindow #ovriaPlansBox .mx-4{ margin-left: 0 !important; margin-right: 0 !important; }
#mainwindow #ovriaPlansBox .p-4{ padding: 0 !important; }

/* v26g: Recipes select2 can render as a double-height control (wrapped chips / input).
   Force it to stay single-line while keeping the placeholder readable. */
#recipe + .select2-container .select2-selection--single,
#recipe + .select2-container .select2-selection--multiple{
  min-height: 46px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
#recipe + .select2-container .select2-selection--single .select2-selection__rendered{
  /* Use flex centering to avoid placeholder drifting to the top */
  display: block !important;
  line-height: normal !important;
  padding-top: 2px !important; /* nudge baseline down for visual centering */
  padding-bottom: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-left: 14px !important;
  padding-right: 38px !important;
}
#recipe + .select2-container .select2-selection--single .select2-selection__arrow{
  height: 46px !important;
  right: 12px !important;
}

#recipe + .select2-container .select2-selection--multiple .select2-selection__rendered{
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  align-items: center !important;
  padding-left: 14px !important;
  padding-right: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#recipe + .select2-container .select2-selection--multiple .select2-search--inline{
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Ensure the placeholder line (rendered via ::before) sits vertically centered */
#recipe + .select2-container .select2-selection--multiple ul.select2-selection__rendered > li.select2-search{
  display: flex !important;
  align-items: center !important;
  height: 46px !important;
}

/* v26i: Available Plans sometimes has an extra inner wrapper panel. Flatten any direct
   child wrappers inside the Plans box body so only plan cards appear. */
#mainwindow #ovriaPlansBox .ovria-launchbox-body > div,
#mainwindow #ovriaPlansBox .ovria-launchbox-body > div > div{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* v26j fixes */

/* v26j fixes: remove persistent inner container around plan cards */
#ovriaPlansBox .ovria-launchbox-body div:has(> .ov-plans-grid){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Neutralize Tailwind-style wrapper utilities that Virtualizor sometimes adds around the plans grid.
   Use safe substring matches (avoid special characters) and keep this scoped to the Plans box. */
#ovriaPlansBox .ovria-launchbox-body div[class*="bg-"],
#ovriaPlansBox .ovria-launchbox-body div[class*="border-"],
#ovriaPlansBox .ovria-launchbox-body div[class*="rounded"],
#ovriaPlansBox .ovria-launchbox-body div[class*="shadow"],
#ovriaPlansBox .ovria-launchbox-body div[class*="p-"],
#ovriaPlansBox .ovria-launchbox-body div[class*="px-"],
#ovriaPlansBox .ovria-launchbox-body div[class*="py-"]{
  background: transparent !important;
  box-shadow: none !important;
}

/* Also remove borders/padding from any wrapper that contains the plan grid (the cards themselves keep their borders). */
#ovriaPlansBox .ovria-launchbox-body *:has(> .ov-plans-grid){
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


/* v26m: Remove any remaining inner border/outline around the plans grid wrapper.
   In some Virtualizor builds, the wrapper is a flex container with padding classes
   (e.g. "flex flex-row flex-wrap ... px-4 pb-2") and can inherit a subtle border.
   We keep spacing but ensure no inner panel/border is shown. */
#mainwindow #ovriaPlansBox #ihb_div > div.flex.flex-row.flex-wrap{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#mainwindow #ovriaPlansBox #ihb_div > div.flex.flex-row.flex-wrap::before,
#mainwindow #ovriaPlansBox #ihb_div > div.flex.flex-row.flex-wrap::after{
  border: 0 !important;
  box-shadow: none !important;
}


/* v26o: Server Ranges selection - remove tick + left accent strip */
#mainwindow #ovriaPlanGroupBox #user_regions .region-card.selected_region #region_select_icon{
  display:none !important;
}
#mainwindow #ovriaPlanGroupBox #user_regions .region-card.selected_region::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  opacity:0 !important;
}


/* v33 FIX: plan header true uniformity + full-width divider (selected/non-selected) */
#ihb_div .plan-card-head{
  padding-top: 14px !important;
  padding-bottom: 10px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  border-bottom: 0 !important; /* we draw our own divider below */
}
#ihb_div .plan-card-head::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0,117,255,.12);
  z-index: 3;
  pointer-events: none;
}
#ihb_div .plan-card-h3{
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Ensure selected accent strip sits behind header/content so it never "clips" divider */
#ihb_div .ihb_slctd_pl{
  position: relative;
}
#ihb_div .ihb_slctd_pl::after{
  z-index: 0 !important;
}
#ihb_div .plan-card-head,
#ihb_div .ovria-plan-card-body{
  position: relative;
  z-index: 2;
}

/* Make sure the selected icon is truly absolute and never affects layout */
#ihb_div #selected_plan_icon{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 5 !important;
  pointer-events: none;
}


/* v34: Plan card header hard-normalize (fix inconsistent title top spacing + divider) */
#ihb_div .plan-card{
  position: relative; /* anchor absolute tick */
  box-sizing: border-box;
}

#ihb_div .plan-card-head{
  /* override tailwind pt-3/pb-2 and any per-card tweaks */
  padding: 14px 18px 12px !important;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  /* draw divider in a way that can't be "covered" by the left strip */
  border-bottom: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(0,117,255,.12);
}

#ihb_div .plan-card-head .plan-card-h3{
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Selected tick: ensure it never affects layout */
#ihb_div #selected_plan_icon{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
}

/* Ensure left selected accent strip sits behind everything */
#ihb_div .ihb_slctd_pl{ position: relative; }
#ihb_div .ihb_slctd_pl::after{ z-index: 0 !important; }
#ihb_div .plan-card-head,
#ihb_div .ovria-plan-card-body{ position: relative; z-index: 2; }



/* View Servers: remove Virtualizor legacy page header inside the window (we use the Ovria hero) */
html.ovria-act-listvs #listvs .eu-page-header{
  display:none !important;
}

/* Ovria empty state (shared) */
html.ovria-act-listvs #listvs .ovria-empty,
html.ovria-act-create #create .ovria-empty{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(0,117,255,.14);
  background:rgba(0,104,253,.03);
}
html.ovria-act-listvs #listvs .ovria-empty .ovria-empty-ico,
html.ovria-act-create #create .ovria-empty .ovria-empty-ico{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:rgba(0,117,255,.12);
  color:var(--ovria-blue);
  font-weight:800;
}
html.ovria-act-listvs #listvs .ovria-empty .ovria-empty-title{
  font-weight:700;
  font-size:14px;
  color:var(--ovria-text, #1b1f2a);
  margin:0 0 2px 0;
}
html.ovria-act-listvs #listvs .ovria-empty .ovria-empty-text{
  font-size:13px;
  color:rgba(27,31,42,.72);
  margin:0 0 10px 0;
}
html.ovria-act-listvs #listvs .ovria-empty .ovria-empty-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}


/* v36: View Servers empty state (replaces Virtualizor 'No VPS were found') */
.notice.ovria-empty-state{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.ovria-empty-wrap{
  background: #fff;
  border: 1px solid rgba(2,6,23,0.08);
  border-radius: 16px;
  padding: 28px 26px;
  max-width: 560px;
  box-shadow: 0 8px 24px rgba(2,6,23,0.05);
}
.ovria-empty-icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(0,117,255,0.10);
  color: #0075FF;
  margin-bottom: 14px;
}
.ovria-empty-title{
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}
.ovria-empty-text{
  color: rgba(15,23,42,0.72);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.ovria-empty-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ovria-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  border: 1px solid rgba(2,6,23,0.10);
}
.ovria-btn-primary{
  background: #0075FF;
  color: #fff !important;
  border-color: #0075FF;
}
.ovria-btn-primary:hover{
  filter: brightness(0.97);
}


/* v37: neutralize bg-border wrapper (listvs) */
.bg-border{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}


/* v38: bg-border neutralize (pure CSS, no DOM manipulation) */
.bg-border{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}


/* v40: prevent Launch Server flash of default Virtualizor content
   Virtualizor adds html.ovria-plans-loading at start of ihb_list_plans().
   We also add it immediately on navigation to act=create/addvs.
   While loading, hide the create page container to avoid FOUC/FOIT.
*/
html.ovria-plans-loading #ihb_div{
  opacity: 0 !important;
  pointer-events: none !important;
}
html.ovria-plans-loading #ihb_div *{
  transition: none !important;
}
/* Optional: keep layout stable with a lightweight placeholder */
html.ovria-plans-loading #ihb_div:before{
  content: "Loading plans…";
  display: block;
  padding: 18px 16px;
  margin: 10px 0;
  border-radius: 14px;
  background: rgba(2,6,23,0.03);
  color: rgba(15,23,42,0.70);
  font-weight: 600;
  font-size: 14px;
}


/* v41: hide entire create window while plans/UI bootstraps to prevent any default form flash */
html.ovria-plans-loading #create{
  opacity: 0 !important;
  pointer-events: none !important;
}
html.ovria-plans-loading #create *{
  transition: none !important;
}
html.ovria-plans-loading #create:before{
  content: "Loading…";
  display: block;
  padding: 18px 16px;
  margin: 10px 0;
  border-radius: 14px;
  background: rgba(2,6,23,0.03);
  color: rgba(15,23,42,0.70);
  font-weight: 600;
  font-size: 14px;
}


/* v42: create-loading gate to prevent flash of Virtualizor default header/content */
html.ovria-create-loading #create main{
  opacity: 0 !important;
  pointer-events: none !important;
}
html.ovria-create-loading #create:before{
  content: "Preparing Launch Server…";
  display: block;
  padding: 18px 16px;
  margin: 10px 0;
  border-radius: 14px;
  background: rgba(2,6,23,0.03);
  color: rgba(15,23,42,0.70);
  font-weight: 600;
  font-size: 14px;
}


/* v47: hide Virtualizor legacy page headers (prevents flash of default 'Servers' header during navigation) */
.eu-page-header{
  display: none !important;
}

/* ===============================
   Ovria: View Servers (listvs) slim table (Vultr/DO style)
   =============================== */
#listvs #vslist_list_table{
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
#listvs #vslist_list_table thead th{
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  background: rgba(15,23,42,.03);
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 14px 16px;
}
#listvs #vslist_list_table tbody td{
  padding: 16px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  vertical-align: middle;
}
#listvs #vslist_list_table tbody tr:hover td{
  background: rgba(59,130,246,.04);
}
#listvs #vslist_list_table tbody tr{ cursor: pointer; }

/* Name cell */
#listvs .ovria-vs-host{
  font-weight: 650;
  font-size: 14px;
  color: rgba(15,23,42,.92);
  line-height: 1.2;
}
#listvs .ovria-vs-sub{
  font-size: 12px;
  color: rgba(15,23,42,.50);
  margin-top: 4px;
}
#listvs .ovria-vs-ip,
#listvs .ovria-vs-plan,
#listvs .ovria-vs-charges{
  font-size: 13px;
  color: rgba(15,23,42,.75);
}

/* Status pills */
#listvs .ovria-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(15,23,42,.10);
  white-space: nowrap;
}
#listvs .ovria-status--online{ background: rgba(34,197,94,.10); color: rgba(22,101,52,.95); }
#listvs .ovria-status--offline{ background: rgba(100,116,139,.12); color: rgba(15,23,42,.75); }
#listvs .ovria-status--suspended{ background: rgba(239,68,68,.10); color: rgba(153,27,27,.95); }
#listvs .ovria-status--building{ background: rgba(245,158,11,.14); color: rgba(146,64,14,.95); }
#listvs .ovria-status--building::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background: currentColor;
  opacity:.55;
  animation: ovriaPulse 1.1s infinite ease-in-out;
}
@keyframes ovriaPulse{ 0%,100%{ transform:scale(.75); opacity:.35;} 50%{ transform:scale(1); opacity:.85;} }

/* Ellipsis action link */
#listvs .ovria-menu-ellipsis{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
  color: rgba(15,23,42,.70);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}
#listvs .ovria-menu-ellipsis:hover{ background: rgba(59,130,246,.10); }

/* Keep dropdown button compact */
#listvs .dropdown_button{ border-radius: 10px; }