/* ========================================
   VPS HOSTING PAGE STYLES
   ======================================== */

/* VPS Page Wrapper */
.vps-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* VPS Header */
.vps-header {
  text-align: center;
  margin-bottom: 40px;
}

.vps-header h2 {
  font-size: 2rem;
  margin-bottom: 16px;
  font-weight: 800;
  color: var(--color-text);
}

.vps-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* VPS Tabs */
.vps-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 20px;
}

/* VPS Tab Badge */
.vps-tab-badge {
  background: rgba(125, 211, 252, 0.1);
  color: #7dd3fc;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 8px;
  border: 1px solid rgba(125, 211, 252, 0.2);
}

.vps-tab {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 12px 24px;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.vps-tab:hover {
  background: var(--color-box);
  color: var(--color-text);
  border-color: var(--color-accent);
}

.vps-tab.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.vps-tab:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Tab Panels */
.vps-tab-panel {
  display: none;
}

.vps-tab-panel.active {
  display: block;
}

/* VPS SSD Grid */
.vps-ssd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 32px;
  align-items: start;
}

/* VPS Cards */
.vps-card {
  background: var(--color-box);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  transition: all 0.3s ease;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 20px;
  height: 100%;
  align-items: start;
}

.vps-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--color-accent);
}

.vps-card.vps-popular {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, rgba(30, 168, 255, 0.08) 0%, rgba(30, 168, 255, 0.02) 100%), var(--color-box);
  box-shadow: 0 0 0 1px rgba(30, 168, 255, 0.2), 0 8px 32px rgba(30, 168, 255, 0.15);
  transform: scale(1.02);
}

.vps-card.vps-popular:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 0 0 1px rgba(30, 168, 255, 0.3), 0 12px 40px rgba(30, 168, 255, 0.25);
}

/* VPS Badge */
.vps-badge {
  position: absolute;
  top: -8px;
  left: 20px;
  background: var(--color-accent);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  z-index: 1;
}

/* VPS Enterprise Badge */
.vps-enterprise-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: linear-gradient(135deg, #d4af37, #f4d03f);
  color: #1a1a1a;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.vps-enterprise-badge i {
  width: 12px;
  height: 12px;
}

/* VPS Enterprise Card */
.vps-enterprise {
  border-color: #d4af37;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.02) 100%), var(--color-box);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.2), 0 8px 32px rgba(212, 175, 55, 0.1);
}

.vps-enterprise:hover {
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.4), 0 12px 40px rgba(212, 175, 55, 0.2);
}

/* VPS HDD Cards - Balanced, consistent with SSD */
.vps-hdd-card {
  border-color: #475569; /* Subtle blue-grey border */
  background: #2A3242; /* Lighter background for better text contrast */
}

/* Force dark theme for HDD cards - default */
.vps-page .vps-hdd-card {
  background: #2A3242 !important;
  border-color: #475569 !important;
}

/* Additional specificity for dark theme */
body .vps-page .vps-hdd-card {
  background: #2A3242 !important;
  border-color: #475569 !important;
}

/* Even higher specificity for dark theme */
html body .vps-page .vps-hdd-card {
  background: #2A3242 !important;
  border-color: #475569 !important;
}

/* Force dark theme for all HDD cards regardless of other rules */
.vps-hdd-card {
  background: #2A3242 !important;
  border-color: #475569 !important;
}

/* Ultra-specific override for HDD cards */
.vps-page .vps-hdd-grid .vps-hdd-card {
  background: #2A3242 !important;
  border-color: #475569 !important;
}

/* Force override with attribute selector */
[class*="vps-hdd-card"] {
  background: #2A3242 !important;
  border-color: #475569 !important;
}

/* Target the exact HTML structure */
article.vps-card.vps-hdd-card {
  background: #2A3242 !important;
  border-color: #475569 !important;
}

/* Even more specific */
.vps-page article.vps-card.vps-hdd-card {
  background: #2A3242 !important;
  border-color: #475569 !important;
}

/* HDD cards will use dark theme by default - no light theme override needed */

/* HDD card hover effects for dark theme */
.vps-page .vps-hdd-card:hover {
  background: #374151 !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Removed light theme overrides - HDD cards use dark theme by default */

/* Light theme overrides moved to end of file for proper cascade order */

.vps-hdd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px #475569;
}

/* HDD cards use dark theme hover effects by default */

.vps-hdd-card .vps-spec-group-header {
  color: var(--color-accent); /* Same accent color as SSD for consistency */
  border-bottom-color: #475569; /* Subtle border */
}

/* HDD cards use dark theme styling by default */

.vps-hdd-card .vps-use-case {
  background: rgba(125, 211, 252, 0.08); /* Light cyan background */
  color: #94a3b8; /* Readable grey text */
}

.vps-hdd-card .vps-savings {
  color: #94a3b8; /* Readable grey for savings text */
}

/* HDD Badge Styling - Match SSD badge appearance */
.vps-hdd-badge {
  background: #7dd3fc;
  color: #1e293b;
  font-weight: 700;
}

/* HDD Card Header - Remove extra padding since we're using proper badges now */
.vps-hdd-card .vps-card-header {
  position: relative;
}

/* HDD Price Styling - Bold dollar amount, lighter /mo */
.vps-hdd-card .vps-price .price {
  font-weight: 700;
  color: var(--color-text);
}

.vps-hdd-card .vps-price .period {
  font-weight: 400;
  color: var(--color-text-secondary);
  opacity: 0.8;
}

/* HDD-1 Price Highlight - Subtle glow on cheapest plan */
.vps-hdd-card:first-child .vps-price .price {
  color: #7dd3fc;
  text-shadow: 0 0 8px rgba(125, 211, 252, 0.3);
}

/* HDD Storage Text Emphasis - Match SSD NVMe styling */
.vps-hdd-card .vps-spec .spec-value {
  font-weight: 500;
}

/* HDD Buttons - Personalized CTAs */
.vps-hdd-card .vps-cta {
  background: var(--color-accent);
  border: 2px solid var(--color-accent);
  color: white;
  transition: all 0.3s ease;
}

.vps-hdd-card .vps-cta:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-2px);
}

/* VPS Trust Badge */
.vps-trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px; /* Reduced margin to fit within pricing block */
  padding: 6px 10px; /* Slightly smaller padding */
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 6px;
  font-size: 0.75rem; /* Slightly smaller font */
  font-weight: 600;
  color: #10b981;
  align-self: center;
}

.vps-trust-badge i {
  width: 14px;
  height: 14px;
  color: #10b981;
}

/* VPS Card Header */
.vps-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.vps-card-header i {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
}

.vps-card-header h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

/* VPS Card Description Wrapper */
.vps-card-description {
  margin-bottom: 20px;
}

/* VPS Use Case */
.vps-use-case {
  background: rgba(30, 168, 255, 0.08);
  color: var(--color-accent);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

/* VPS Psychological Nudge */
.vps-psych-nudge {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  margin: 0;
  font-style: italic;
  opacity: 0.9;
}

/* VPS Specs */
.vps-specs {
  display: grid;
  grid-template-rows: auto repeat(3, 1fr) auto repeat(3, 1fr) auto 1fr;
  gap: 8px;
  height: 360px; /* Reduced height since we have fewer rows */
  margin-bottom: 24px; /* Increased bottom margin for better spacing */
  align-items: start; /* Ensure all grid items align to start */
}

.vps-spec {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
  min-height: 32px; /* Ensure consistent row height */
  align-self: start; /* Ensure consistent alignment within grid */
}

.vps-spec:last-child {
  border-bottom: none;
  margin-bottom: 8px; /* Extra spacing before pricing section */
}

/* VPS Spec Group Headers */
.vps-spec-group-header {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 0 4px 0;
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: 4px;
  grid-column: 1 / -1;
  text-align: left;
  align-self: start; /* Ensure consistent alignment */
  min-height: 24px; /* Fixed minimum height for consistency */
}

/* Support section spacing - more breathing room */
.vps-spec-group-header[data-group="support"] {
  margin-top: 20px;
  padding-top: 16px;
}

/* Mobile-only collapsible styles */
@media (max-width: 768px) {
  .vps-spec-group-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: all 0.2s ease;
    padding-right: 20px;
    min-height: 40px; /* Consistent minimum height for background */
    display: flex;
    align-items: center;
  }

  .vps-spec-group-header:hover {
    color: var(--color-text);
    background: rgba(30, 168, 255, 0.05);
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 28px;
  }

  .vps-spec-group-header::after {
    content: "▼";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    transition: transform 0.2s ease;
  }

  .vps-spec-group-header.collapsed::after {
    transform: translateY(-50%) rotate(-90deg);
  }
}

/* VPS Spec Group Content */
.vps-spec-group-content {
  grid-column: 1 / -1;
}

/* Mobile-only collapsible content styles */
@media (max-width: 768px) {
  .vps-spec-group-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    max-height: 200px; /* Default expanded height */
    opacity: 1;
  }

  .vps-spec-group-content.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

.spec-label {
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  text-align: left;
}

.spec-value {
  font-weight: 500;
  color: var(--color-text);
  font-size: 0.9rem;
  text-align: right;
  line-height: 1.2;
  word-spacing: -0.5px;
}

/* Support section bullet separator */
.vps-spec-group-content[data-group="support"] .spec-value {
  font-size: 0.85rem;
  line-height: 1.3;
}

/* Storage values are now shorter and don't need special wrapping rules */

/* VPS Pricing */
.vps-pricing {
  text-align: center;
  margin: 16px 0;
  min-height: 80px; /* Fixed height to ensure CTA alignment */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vps-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}

.vps-price .price {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5) !important;
}

.vps-price .period {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: #cccccc !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.vps-savings {
  font-size: 0.85rem;
  color: var(--color-accent);
  font-weight: 600;
  opacity: 0.9;
}

/* Force VPS pricing visibility */
.vps-pricing .vps-price .price {
  color: #ffffff !important;
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.vps-pricing .vps-price .period {
  color: #cccccc !important;
  font-size: 1.1rem !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* VPS Savings Highlight */
.vps-savings-highlight {
  color: #10b981 !important;
  font-weight: 700 !important;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 4px;
}

/* VPS CTA */
.vps-cta {
  width: 100%;
  text-align: center;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  align-self: end;
  margin-top: auto;
}

/* VPS Compare Link */
.vps-compare-link {
  text-align: center;
  margin-top: 20px;
}

.vps-compare-link a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.vps-compare-link a:hover {
  color: var(--color-text);
}

/* VPS Custom Note */
.vps-custom-note {
  text-align: center;
  margin-top: 16px;
  padding: 16px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.vps-custom-note p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}

/* VPS HDD Table Layout */
.vps-hdd-container {
  background: var(--color-box);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.vps-hdd-table {
  display: grid;
  grid-template-columns: 1fr;
}

.vps-hdd-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr 1fr 1fr 1fr;
  background: var(--color-bg-secondary);
  font-weight: 700;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-border);
}

.vps-hdd-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s ease;
}

.vps-hdd-row:hover {
  background: var(--color-bg-secondary);
}

.vps-hdd-row:last-child {
  border-bottom: none;
}

.vps-hdd-cell {
  padding: 16px 12px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.vps-hdd-plan {
  font-weight: 700;
}

.vps-hdd-plan-name {
  color: var(--color-text);
  font-size: 1rem;
}

.vps-hdd-price {
  justify-content: center;
  gap: 4px;
}

.vps-hdd-price .price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
}

.vps-hdd-price .period {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.vps-hdd-cta {
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
  justify-self: center;
}

/* VPS Footer Notes */
.vps-footer-notes {
  text-align: center;
  margin-top: 40px;
  padding: 40px;
  background: var(--color-bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.vps-footer-notes h4 {
  margin: 0 0 24px 0;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Features Block */
.vps-features-block {
  margin-bottom: 40px;
}

.vps-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.vps-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(30, 168, 255, 0.08);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.vps-feature-item:hover {
  background: rgba(30, 168, 255, 0.12);
  transform: translateY(-2px);
}

.vps-feature-item i {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.vps-feature-item span {
  color: var(--color-text);
  font-weight: 500;
  font-size: 14px;
}

/* Support Tiers */
.vps-support-tiers {
  margin-bottom: 40px;
}

.vps-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.vps-tier-item {
  padding: 20px;
  background: var(--color-box);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.vps-tier-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Highlight Priority tier as recommended */
.vps-tier-item:nth-child(2) {
  border: 2px solid var(--color-accent);
  box-shadow: 0 2px 8px rgba(30, 168, 255, 0.15), 0 0 0 1px rgba(30, 168, 255, 0.1);
  position: relative;
}

.vps-tier-item:nth-child(2)::before {
  content: "Recommended";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vps-tier-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vps-tier-badge.standard {
  background: #64748b;
  color: white;
}

.vps-tier-badge.priority {
  background: #3b82f6;
  color: white;
}

.vps-tier-badge.premium {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.vps-tier-desc {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.4;
}

.vps-tiers-footnote {
  margin-top: 20px;
  padding: 16px;
  background: rgba(30, 168, 255, 0.05);
  border-radius: 8px;
  border-left: 3px solid var(--color-accent);
}

.vps-tiers-footnote p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: center;
}

.vps-tiers-footnote strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Add-ons Block */
.vps-addons-block {
  margin-bottom: 0;
}

.vps-addon-badge {
  display: inline-block;
  background: var(--color-accent);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  margin-left: 8px;
}

.vps-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.vps-addon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(30, 168, 255, 0.08);
  border: 1px solid rgba(30, 168, 255, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.vps-addon-item:hover {
  background: rgba(30, 168, 255, 0.12);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 168, 255, 0.2);
}

.vps-addon-item i {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.vps-addon-item span {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .vps-footer-notes {
    padding: 30px 20px;
  }
  
  .vps-features-grid,
  .vps-tiers-grid,
  .vps-addons-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .vps-addons-grid {
    gap: 12px;
  }
  
  .vps-feature-item,
  .vps-addon-item {
    padding: 12px;
  }
  
  .vps-tier-item {
    padding: 16px;
  }
}

/* VPS Benefits Section */
.vps-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
}

.vps-benefit-card {
  background: var(--color-box);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.vps-benefit-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Enhanced hover for bottom row cards */
.vps-benefit-card:not(.vps-benefit-highlight):hover {
  border-color: rgba(30, 168, 255, 0.6);
  box-shadow: 0 6px 20px rgba(30, 168, 255, 0.25), 0 0 0 1px rgba(30, 168, 255, 0.2);
}

/* Enhanced visual balance for bottom row cards */
.vps-benefit-card:not(.vps-benefit-highlight) {
  border: 1px solid rgba(30, 168, 255, 0.4);
  box-shadow: 0 3px 12px rgba(30, 168, 255, 0.15), 0 0 0 1px rgba(30, 168, 255, 0.1);
  background: linear-gradient(135deg, var(--color-box) 0%, rgba(30, 168, 255, 0.01) 100%);
}

.vps-benefit-highlight {
  border: 2px solid var(--color-accent);
  box-shadow: 0 4px 15px rgba(30, 168, 255, 0.2);
  background: linear-gradient(135deg, var(--color-box) 0%, rgba(30, 168, 255, 0.02) 100%);
}

.vps-benefit-highlight::before {
  content: "Top Benefit";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vps-benefit-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.vps-benefit-card:hover .vps-benefit-icon {
  transform: scale(1.1);
}

/* Icon consistency - add subtle border to bottom row icons */
.vps-benefit-card:not(.vps-benefit-highlight) .vps-benefit-icon {
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.vps-benefit-icon i {
  width: 28px;
  height: 28px;
  color: white;
}

/* Icon Colors */
.ssl-icon {
  background: linear-gradient(135deg, #10b981, #059669);
}

.uptime-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.support-icon {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.migration-icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.backup-icon {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

.ssd-icon {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.vps-benefit-card h3 {
  margin: 0 0 16px 0;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 600;
}

.vps-benefit-desc {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* Benefits CTA */
.vps-benefits-cta {
  text-align: center;
  margin-top: 48px;
  padding: 40px 32px;
  background: rgba(30, 168, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(30, 168, 255, 0.2);
}

.vps-benefits-cta p {
  margin: 0 0 16px 0;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 500;
}

.vps-benefits-btn {
  display: inline-block;
  background: var(--color-accent);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.vps-benefits-btn:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 168, 255, 0.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .vps-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .vps-benefit-card {
    padding: 24px 20px;
  }
  
  .vps-benefits-cta {
    padding: 32px 20px;
    margin-top: 40px;
  }
}

/* VPS Comparison Table */
.vps-type-toggle {
  display: flex;
  justify-content: center;
  margin: 40px 0 24px;
  background: var(--color-box);
  border-radius: 12px;
  padding: 8px;
  border: 1px solid var(--color-border);
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.vps-type-btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.vps-type-btn.active {
  background: var(--color-accent);
  color: white;
  box-shadow: 0 2px 8px rgba(30, 168, 255, 0.3);
}

.vps-billing-toggle {
  display: flex;
  justify-content: center;
  margin: 0 0 32px;
  background: var(--color-box);
  border-radius: 12px;
  padding: 8px;
  border: 1px solid var(--color-border);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.vps-toggle-btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.vps-toggle-btn.active {
  background: var(--color-accent);
  color: white;
  box-shadow: 0 2px 8px rgba(30, 168, 255, 0.3);
}

.vps-savings-badge {
  background: #10b981;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

.vps-compare-container {
  overflow-x: auto;
  margin: 32px 0;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-box);
}

.vps-compare-table {
  min-width: 800px;
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr);
}

.vps-compare-header {
  display: contents;
}

.vps-compare-feature {
  padding: 20px 16px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
}

.vps-compare-plan {
  padding: 20px 16px;
  text-align: center;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  position: relative;
}

.vps-popular-plan {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, rgba(30, 168, 255, 0.08) 100%);
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  margin: -2px;
  z-index: 1;
  box-shadow: 0 4px 20px rgba(30, 168, 255, 0.15);
  transform: translateY(-2px);
  position: relative;
}

.vps-plan-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.vps-plan-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vps-plan-badge:not(.popular):not(.premium) {
  background: #64748b;
  color: white;
}

.vps-plan-badge.popular {
  background: var(--color-accent);
  color: white;
}

.vps-plan-badge.premium {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.vps-plan-badge.storage-beast {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vps-compare-row {
  display: contents;
}

.vps-compare-cell {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text);
  font-size: 14px;
}

.vps-pricing-row .vps-compare-cell {
  background: rgba(30, 168, 255, 0.05);
  font-weight: 600;
}

.vps-price-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.vps-savings-text {
  font-size: 0.85rem;
  color: var(--color-accent);
  font-weight: 600;
  margin-top: 4px;
  background: rgba(30, 168, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(30, 168, 255, 0.2);
}

.vps-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-accent);
  display: flex;
}

.vps-price.active {
  display: block;
}

.vps-price.monthly-price {
  color: var(--color-text-secondary);
  opacity: 0.5;
  font-weight: 400;
  font-size: 20px;
}

.vps-price.annual-price {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 26px;
}

.vps-period {
  font-size: 14px;
  color: var(--color-text-secondary);
  font-weight: 400;
}

.vps-check {
  width: 16px;
  height: 16px;
  color: #10b981;
  margin-right: 8px;
  flex-shrink: 0;
}

.vps-cta-row .vps-compare-cell {
  padding: 20px 16px;
  background: var(--color-bg-secondary);
}

.vps-compare-cta {
  display: inline-block;
  padding: 12px 24px;
  background: var(--color-accent);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
}

.vps-compare-cta:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 168, 255, 0.3);
}

.vps-compare-cta.popular {
  background: var(--color-accent);
  box-shadow: 0 2px 8px rgba(30, 168, 255, 0.3);
}

.vps-compare-cta.premium {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.vps-compare-cta.premium:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
}

/* SLA Badge for Enterprise */
.vps-sla-badge {
  display: inline-block;
  background: #10b981;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 8px;
}

.vps-sla-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Retention Premium Highlight */
.vps-retention-premium {
  color: #22c55e;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.1);
  padding: 2px 4px;
  border-radius: 3px;
}

/* Compare Detail Link */
.vps-compare-detail {
  margin-top: 40px;
  padding: 24px;
  background: var(--color-bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.vps-compare-detail-content {
  text-align: center;
}

.vps-compare-detail-content p {
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
  font-size: 0.95rem;
}

.vps-detail-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vps-detail-link:hover {
  color: var(--color-accent-hover);
  transform: translateX(2px);
}

/* Enhanced hover effects for plan cards */
.vps-compare-plan:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.vps-popular-plan:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(30, 168, 255, 0.2);
}

/* Ensure popular plan cells don't have conflicting borders */
.vps-popular-plan .vps-compare-cell {
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--color-accent);
}

.vps-popular-plan .vps-compare-cell:last-child {
  border-bottom: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .vps-compare-container {
    margin: 24px -20px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  .vps-compare-table {
    min-width: 600px;
    grid-template-columns: 150px repeat(4, 1fr);
  }
  
  .vps-compare-feature,
  .vps-compare-cell {
    padding: 12px 8px;
    font-size: 13px;
  }
  
  .vps-plan-name {
    font-size: 16px;
  }
  
  .vps-price {
    font-size: 20px;
  }
  
  .vps-compare-cta {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* VPS Operating Systems Section */
.vps-os-section {
  margin: 40px 0;
  padding: 32px;
  background: var(--color-bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.vps-os-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px 0;
  text-align: center;
}

.vps-os-section > p {
  text-align: center;
  color: var(--color-text-secondary);
  margin: 0 0 24px 0;
  font-size: 1rem;
}

.vps-os-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.vps-os-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-box);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.vps-os-item:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: rgba(30, 168, 255, 0.02);
}

/* OS Badges */
.vps-os-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--color-accent);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  z-index: 1;
}

.vps-os-popular .vps-os-badge {
  background: #10b981; /* Green for popular choices */
}

/* OS Icons */
.vps-os-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(30, 168, 255, 0.1);
  flex-shrink: 0;
}

.vps-os-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Specific OS Icon Styling */
.ubuntu-icon {
  background: rgba(221, 72, 20, 0.1);
}

.debian-icon {
  background: rgba(211, 0, 0, 0.1);
}

.fedora-icon {
  background: rgba(60, 110, 180, 0.1);
}

.almalinux-icon {
  background: rgba(51, 51, 51, 0.1);
}

.rocky-icon {
  background: rgba(116, 185, 255, 0.1);
}

.centos-icon {
  background: rgba(130, 2, 99, 0.1);
}

.oracle-icon {
  background: rgba(255, 0, 0, 0.1);
}

.suse-icon {
  background: rgba(0, 122, 204, 0.1);
}

.scientific-icon {
  background: rgba(0, 0, 0, 0.1);
}

.webuzo-icon {
  background: rgba(0, 150, 136, 0.1);
}

.windows-icon {
  background: rgba(0, 120, 212, 0.1);
}

.vps-os-info h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px 0;
}

.vps-os-info p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.3;
}

.vps-os-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0;
  padding: 16px;
  background: var(--color-box);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

/* Responsive Design for VPS Page */
@media (max-width: 768px) {
  .vps-page {
    padding: 16px;
  }
  
  .vps-header h2 {
    font-size: 1.6rem;
  }
  
  .vps-subtitle {
    font-size: 1rem;
  }
  
  .vps-tabs {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  .vps-tab {
    width: 100%;
    max-width: 200px;
    text-align: center;
  }
  
  .vps-ssd-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  /* Ensure HDD cards maintain dark background on mobile */
  .vps-hdd-card {
    background: #2A3242 !important;
    border-color: #475569 !important;
  }
  
  .vps-page .vps-hdd-card {
    background: #2A3242 !important;
    border-color: #475569 !important;
  }
  
  body .vps-page .vps-hdd-card {
    background: #2A3242 !important;
    border-color: #475569 !important;
  }
  
  /* HDD cards use dark theme on mobile by default */
  
  /* Light theme overrides moved to end of file for proper cascade order */
  
  .vps-card {
    padding: 20px;
    align-items: stretch; /* Allow natural flow on mobile */
  }
  
  .vps-specs {
    height: auto; /* Remove fixed height on mobile */
    grid-template-rows: none; /* Allow natural row heights on mobile */
  }
  
  .vps-spec-group-header {
    font-size: 0.75rem;
    padding: 6px 0 2px 0;
    margin-bottom: 2px;
    padding-right: 20px; /* Space for arrow */
  }
  
  .vps-spec-group-content {
    max-height: 150px; /* Smaller max-height on tablet */
  }
  
  .vps-pricing {
    min-height: auto; /* Allow natural height on mobile */
  }
  
  .vps-cta {
    align-self: stretch; /* Full width on mobile */
    margin-top: 16px; /* Natural spacing on mobile */
  }
  
  .vps-trust-badge {
    align-self: stretch; /* Full width on mobile */
    margin-top: 12px; /* Natural spacing on mobile */
  }
  
  .vps-os-section {
    padding: 24px 16px;
    margin: 32px 0;
  }
  
  .vps-os-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .vps-hdd-header {
    display: none;
  }
  
  .vps-hdd-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 16px;
  }
  
  .vps-hdd-row:last-child {
    margin-bottom: 0;
  }
  
  .vps-hdd-cell {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .vps-hdd-cell:last-child {
    border-bottom: none;
    justify-content: center;
    padding-top: 16px;
  }
  
  .vps-hdd-cell:before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
  }
  
  .vps-hdd-plan:before {
    content: "Plan";
  }
  
  .vps-hdd-cell:nth-child(2):before {
    content: "vCPU";
  }
  
  .vps-hdd-cell:nth-child(3):before {
    content: "RAM";
  }
  
  .vps-hdd-cell:nth-child(4):before {
    content: "Storage";
  }
  
  .vps-hdd-cell:nth-child(5):before {
    content: "Bandwidth";
  }
  
  .vps-hdd-cell:nth-child(6):before {
    content: "Port";
  }
  
  .vps-hdd-cell:nth-child(7):before {
    content: "Price";
  }
  
  .vps-hdd-cell:nth-child(8):before {
    content: "";
  }
}

@media (max-width: 480px) {
  .vps-ssd-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .vps-card {
    height: auto; /* Allow natural height on very small screens */
  }
  
  .vps-card-header {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  
  .vps-specs {
    gap: 8px;
  }
  
  .vps-spec {
    padding: 6px 0;
  }
  
  .vps-price .price {
    font-size: 1.8rem;
  }
  
  .vps-cta {
    margin-top: 20px; /* More spacing on very small screens */
  }
  
  .vps-pricing {
    min-height: auto; /* Allow natural height on very small screens */
  }
  
  .vps-trust-badge {
    margin-top: 16px; /* More spacing on very small screens */
  }
  
  .vps-spec-group-header {
    font-size: 0.7rem;
    padding: 4px 0 2px 0;
    margin-bottom: 1px;
    padding-right: 18px; /* Space for arrow on small screens */
  }
  
  .vps-spec-group-content {
    max-height: 120px; /* Even smaller max-height on mobile */
  }
}

/* HDD Table Specific Styling */
.vps-hdd-table .vps-compare-plan {
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.vps-hdd-table .vps-popular-plan {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, rgba(34, 197, 94, 0.08) 100%);
  border: 2px solid #22c55e;
  border-radius: 8px;
  margin: -2px;
  z-index: 1;
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.15);
  transform: translateY(-2px);
  position: relative;
}

.vps-hdd-table .vps-popular-plan:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(34, 197, 94, 0.2);
}

/* HDD Storage Emphasis */
.vps-storage-premium {
  color: #22c55e;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Ensure HDD popular plan cells don't have conflicting borders */
.vps-hdd-table .vps-popular-plan .vps-compare-cell {
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #22c55e;
}

.vps-hdd-table .vps-popular-plan .vps-compare-cell:last-child {
  border-bottom: none;
}

/* ========================================
   LIGHT THEME OVERRIDES FOR HDD CARDS
   ========================================
   These MUST be at the end of the file to override dark theme styles
   Using data-theme attribute selectors (not CSS classes)
*/

/* Ultra-specific light theme selectors - FINAL OVERRIDE */
html[data-theme="light"] .vps-page article.vps-card.vps-hdd-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .vps-page .vps-hdd-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .vps-page .vps-hdd-grid .vps-hdd-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] [class*="vps-hdd-card"] {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] article.vps-card.vps-hdd-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] body .vps-page .vps-hdd-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] body .vps-page article.vps-card.vps-hdd-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Light theme hover effects - FINAL OVERRIDE */
html[data-theme="light"] .vps-page .vps-hdd-card:hover {
  background: #f1f5f9 !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] body .vps-page .vps-hdd-card:hover {
  background: #f1f5f9 !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   VPS FAQ STYLING
   ======================================== */

/* FAQ Subtitle */
.faq-subtitle {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  margin: 0 0 2rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* FAQ Answer Lists */
.faq-a ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.5rem;
  list-style: none;
}

.faq-a li {
  margin: 0.5rem 0;
  position: relative;
  padding-left: 1rem;
}

.faq-a li::before {
  content: "•";
  color: var(--color-accent);
  font-weight: bold;
  position: absolute;
  left: 0;
}

.faq-a strong {
  color: var(--color-accent);
  font-weight: 600;
}