/* custom.css */

/* Root variables */
:root {
  --bs-primary: #1abc9c;
  --bs-primary-rgb: 26, 188, 156;
  --bs-primary-bg-subtle: #e6f7f3;
  --bs-primary-text-emphasis: #0d5e4e;
  --bs-primary-border-subtle: #b3e8db;
}

/* Base styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.navbar {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
}

/* Hero background and overlay */
.hero {
  background: linear-gradient(to right, #212529, #343a40 50%, #212529);
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="5" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(#noise)" opacity="0.4"/></svg>');
  opacity: 0.3;
  pointer-events: none;
}

/* Card defaults */
.card {
  border: none;
  border-radius: 0.5rem;
}

/* Button styles */
.btn-primary {
  border-radius: 50rem;
  padding: 10px 20px;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #16a085;
  --bs-btn-hover-border-color: #16a085;
  --bs-btn-active-bg: #16a085;
  --bs-btn-active-border-color: #16a085;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.text-primary {
  color: var(--bs-primary) !important;
}

.section {
  padding: 60px 20px;
}

/* Links */
a {
  color: var(--bs-primary);
  text-decoration: underline;
}

a:hover {
  color: #16a085;
}

/* Stat card */
.stat-card {
  background: #2c3034;
}

.stat-icon {
  font-size: 1.5rem;
}

/* Dark subtle background utility */
.bg-dark-subtle {
  background-color: #2c3034 !important;
}

/* Text light utility */
.text-light {
  color: #f6f9ff !important;
}

/* ===== Plan Cards ===== */
/* Default border and transition */
.plan-card {
  border: 2px solid transparent;
  transition: background-color 0.2s, border-color 0.2s;
}

/* Hover effect: subtle overlay */
.plan-card:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Selected state: blue outline, subtle background */
.plan-card.selected {
  border-color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.08);
}

/* ===== Order Button Spacing ===== */
#select-plan-btn {
  margin-bottom: 2rem;
}

/* ===== Features Grid ===== */
.features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.features-grid .feature-col {
  flex: 1;
  min-width: 200px;
}

/* Features card full width */
.features-card {
  width: 100%;
}

/* Features list items spacing */
.features-card .list-group-item {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}