/* Pricing page specific styles - orange-themed variant */
.pricing-hero { padding: 6rem 1rem; background: #ffffff; color: var(--dark); }
.pricing-hero .container { max-width: 1200px; margin: 0 auto; }
.pricing-hero h1 { text-align: center; font-size: 2.75rem; margin-bottom: .5rem; }
.pricing-hero .lead { text-align: center; max-width: 800px; margin: 0 auto 2.5rem; opacity: .95; }

.pricing-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 2.5rem; }

.pricing-card { position: relative; background: rgba(255,255,255,0.95); color: #111827; padding: 2.25rem; border-radius: 14px; box-shadow: 0 10px 30px rgba(31,42,68,0.08); transition: transform 320ms ease, opacity 380ms ease; transform: translateY(30px); opacity: 0; }
.pricing-card .card-inner { display:flex; flex-direction:column; gap:1rem; }
.pricing-card h3 { font-size: 1.25rem; font-weight:700; }
.pricing-card .price { font-size: 2rem; font-weight:800; margin: .25rem 0; }
.pricing-card .muted { color: #6b7280; font-size: .95rem; }
.pricing-card .features { list-style:none; padding:0; margin: .5rem 0 1rem 0; display:flex; flex-direction:column; gap:.5rem; }
.pricing-card .features li::before { content: '✓'; color: #16a34a; margin-right: .5rem; }
.pricing-card .btn { margin-top: auto; align-self: stretch; text-align:center; }

/* Popular (center) card uses orange background but keep site style */
.pricing-card.popular { background: linear-gradient(180deg,var(--orange) 0%, #e56d10 100%); color: #fff; transform: translateY(-6px); box-shadow: 0 30px 60px rgba(31,42,68,0.18); }
.pricing-card.popular .price { font-size: 2.25rem; }
.pricing-card.popular .features li::before { color: rgba(255,255,255,0.95); }
.pricing-card.popular .btn { background: #fff; color: var(--orange); border-radius: 10px; padding: .75rem 1rem; }
.pricing-card .btn.btn-secondary { background: #0f1724; color: #fff; border-radius: 10px; padding: .75rem 1rem; }

.pricing-card .badge { display:none; }
.pricing-card.popular .badge { display:inline-block; background:#FFD54F; color:#111; padding:.25rem .6rem; border-radius: 999px; font-weight:700; position:absolute; left:50%; transform:translateX(-50%); top:-14px; }

/* animate class toggles visibility (mirrors other components) */
.pricing-card.animate { transform: translateY(0); opacity: 1; }

@media(min-width:768px){ .pricing-grid { grid-template-columns: repeat(3, 1fr); } .pricing-card { padding: 2.75rem; } }

@media(max-width:900px){ .pricing-hero { padding: 3.5rem 1rem; } .pricing-hero h1{ font-size:2rem; } .pricing-card { border-radius: 12px; } .pricing-card.popular { transform:none; } }

/* Mobile adjustments for hosting and badges */
@media (max-width: 640px) {
  .hosting-card { flex-direction: column; align-items: stretch; }
  .hosting-card .hosting-icon { margin-bottom: 1rem; }
  .hosting-card ul { grid-template-columns: 1fr; }
  .hosting-card { padding: 1.25rem; }
  .pricing-card { padding: 1.25rem; }
  /* Keep the popular badge centered above card on small screens */
  .pricing-card.popular .badge { top: -12px; left: 50%; transform: translateX(-50%); }
}

.hosting-service { padding: 3.5rem 1rem; background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent 30%); }
.hosting-card { display:flex; gap: 1.5rem; align-items:flex-start; background: #fff; border-radius: 14px; padding: 2rem; box-shadow: 0 18px 50px rgba(31,42,68,0.08); max-width: 1100px; margin: 0 auto; }
.hosting-card .hosting-icon { flex: 0 0 84px; display:flex; align-items:center; justify-content:center; }
.hosting-card .hosting-content { flex: 1 1 auto; }
.hosting-card h3 { color: var(--orange); margin-bottom: 0.25rem; font-size: 1.5rem; }
.hosting-lead { color: var(--dark); margin-bottom: 0.75rem; }
.hosting-card h4 { margin-top: 0.5rem; color: var(--dark); }
.hosting-card ul { list-style:none; padding:0; margin: 0.5rem 0 1rem 0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:0.5rem 1rem; }
.hosting-card ul li { padding-left: 0; position: relative; color: var(--dark); padding-left: 22px; }
.hosting-card ul li::before { content: ''; position:absolute; left: 0; top: 8px; width:10px; height:10px; background: var(--orange); border-radius:2px; }
.hosting-meta { display:flex; gap:1.25rem; align-items:center; margin-top:0.75rem; }
.hosting-price { font-weight:700; color: var(--dark); }
.hosting-note { color: rgba(31,42,68,0.65); font-size:0.95rem; }
.hosting-card .btn { margin-top: 0.75rem; }
/* Hosting badge styling */
.hosting-card { position: relative; }
.hosting-badge {
  position: absolute;
  top: -12px;
  right: 18px;
  background: #0b74ff; /* blue */
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 8px 22px rgba(11,116,255,0.12);
  z-index: 8;
}

@media (max-width: 900px) {
  .hosting-badge { right: 14px; top: -10px; }
}