/* ===== Plans cards (Xenia-like) ===== */
:root{
  --plan-bg: rgba(18, 22, 40, .72);
  --plan-bg2: rgba(18, 22, 40, .55);
  --plan-stroke: rgba(255,255,255,.10);
  --plan-stroke2: rgba(255,255,255,.16);
  --plan-text: #fff;
  --plan-muted: rgba(255,255,255,.72);
  --plan-muted2: rgba(255,255,255,.56);
  --plan-accent: var(--primary, #ff6a00); /* site primary */
  --plan-radius: 22px;
}

/* container */
.plans-x {
  padding: 56px 0;
}
.plans-x .section-title p { color: var(--plan-muted); }

/* grid */
.plans-x-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 980px){ .plans-x-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .plans-x-grid{ grid-template-columns: 1fr; } }

/* card */
.plan-card-x{
  background: linear-gradient(180deg, var(--plan-bg), var(--plan-bg2));
  border: 1px solid var(--plan-stroke);
  border-radius: var(--plan-radius);
  padding: 20px 18px 16px;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  position: relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.plan-card-x:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}

.plan-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.plan-title-row h3{
  margin:0;
  color: var(--plan-text);
  font-size: 20px;
  font-weight: 800;
}
.plan-badge-x{
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--plan-stroke);
  color: var(--plan-muted);
  background: rgba(0,0,0,.22);
}

.plan-list-x{
  list-style:none;
  padding:0;
  margin: 12px 0 0;
  display:grid;
  gap: 10px;
}
.plan-list-x li{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--plan-text);
  font-weight:700;
}
.plan-list-x .plan-ico{
  width: 26px; height: 26px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
}
.plan-list-x .plan-ico img{
  width: 16px;
  height: 16px;
  display:block;
}
.plan-list-x .plan-ico img.flag{
  width: 18px;
  height: 13px;
  border-radius: 3px;
}
.plan-list-x .muted{ color: var(--plan-muted); font-weight:700; }
.plan-list-x .accent{ color: var(--plan-accent); }

/* divider */
.plan-divider-x{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}

/* labels */
.plan-label-x{
  margin:0 0 10px;
  font-size: 12px;
  font-weight: 900;
  color: var(--plan-text);
}
.plan-label-x .req{ color: var(--plan-accent); }

/* OS buttons */
.os-grid-x{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  /* ensures dropdowns can float above siblings cleanly */
  position: relative;
  z-index: 1;
}
.os-pill-x{
  position: relative;
  z-index: 2;
  border: 1px solid var(--plan-stroke);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  display:flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  user-select:none;
}
.os-pill-x:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
  z-index: 10;
}
.os-pill-x.is-open{
  /* keep the open menu above the other pills (hover transforms create stacking contexts) */
  z-index: 999;
}
.os-pill-x.is-open:hover{
  /* avoid jitter while the dropdown is open */
  transform: none;
}
.os-pill-x.is-active{
  border-color: rgba(255,106,0,.40);
  background: rgba(255,106,0,.12);
  color: #fff;
}
.os-pill-x .os-icon{
  width: 18px;
  height: 18px;
  display:block;
  border-radius: 6px;
}
.os-pill-x .os-dot{
  width: 12px; height: 12px;
  border-radius: 4px;
  background: rgba(255,255,255,.22);
}
.os-pill-x .os-chev{
  width: 8px;
  height: 8px;
  margin-left: 2px;
  opacity: .75;
  border-right: 2px solid rgba(255,255,255,.60);
  border-bottom: 2px solid rgba(255,255,255,.60);
  transform: rotate(45deg);
}

/* quick OS colors */
.os-dot.ubuntu{ background:#e95420; }
.os-dot.centos{ background:#7d4698; }
.os-dot.alma{ background:#1b9aaa; }
.os-dot.fedora{ background:#51a2da; }
.os-dot.opensuse{ background:#73ba25; }
.os-dot.windows{ background:#00a4ef; }
.os-dot.debian{ background:#d70a53; }
.os-dot.rocky{ background:#10b981; }
.os-dot.scientific{ background:#6366f1; }

/* select */
.select-x{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--plan-stroke);
  background: rgba(255,255,255,.04);
  padding: 10px 12px;
  color: #fff;
  font-weight: 800;
  outline:none;
}
.select-x option{ color:#000; }

/* price row */
.price-row-x{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-top: 14px;
}
.price-x{
  font-size: 34px;
  font-weight: 900;
  color: var(--plan-accent);
  letter-spacing: -0.5px;
}
.price-x .per{
  font-size: 18px;
  color: rgba(255,255,255,.70);
  font-weight: 900;
}
.vat-x{
  font-size: 12px;
  color: rgba(255,255,255,.60);
  font-weight: 800;
}

/* button */
.btn-stock-x{
  margin-top: 14px;
  width: 100%;
  border-radius: 999px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.45);
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.btn-stock-x.is-available{
  cursor:pointer;
  color: #fff;
  background: linear-gradient(90deg, rgba(255,106,0,.55), rgba(255,106,0,.35));
  border-color: rgba(255,106,0,.55);
}


/* OS version dropdown */

.os-ver-badge{
  margin-left: auto;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.86);
}

.os-dd{
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: 120px;
  z-index: 9999;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18, 22, 40, .94);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  overflow: hidden;
  display: none;
}

.os-pill-x.is-open .os-dd{ display: block; }

.os-dd-inner{ padding: 6px; display: grid; gap: 6px; }

.os-ver-item{
  width: 100%;
  text-align: left;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.os-ver-item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,106,0,.35);
  background: rgba(255,106,0,.10);
}

/* Floating dropdown portal (prevents being covered by other pills on hover/transform) */
.os-dd.os-dd-float{
  position: fixed;
  left: 0;
  top: 0;
  width: 140px;
  z-index: 99999;
  display: none; /* toggled via .is-visible */
  background: rgba(18, 22, 40, .98);
  border-color: rgba(255,255,255,.18);
}
.os-dd.os-dd-float.is-visible{
  display: block;
}
.os-dd.os-dd-float .os-ver-item{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}
.os-dd.os-dd-float .os-ver-item:hover{
  background: rgba(255,106,0,.16);
  border-color: rgba(255,106,0,.45);
}