:root {
  --gray-100: var(--bg-elevated, #191c24);
  --gray-200: var(--border-strong, #2e3040);
  --gray-300: var(--border-hover, #3e4050);
  --gray-500: var(--muted, #838387);
  --gray-600: var(--muted-strong, #75757d);
  --gray-900: var(--text-strong, #f4f4f5);
}
.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s;
}
.step.active .step-num, .step.completed .step-num {
  background: var(--accent);
  color: white;
}
.step-label {
  font-size: 10px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.step.active .step-label {
  color: var(--accent);
  font-weight: 600;
}
.step-line {
  width: 24px;
  height: 2px;
  background: var(--gray-200);
  margin: 0 4px;
  margin-bottom: 16px;
}
.step.completed + .step-line,
.step.completed ~ .step .step-line {
  background: var(--accent);
}

.setup-step {
  display: none;
}
.setup-step.active {
  display: block;
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  text-align: center;
}
.step-desc {
  font-size: 13px;
  color: var(--gray-500);
  text-align: center;
  margin-bottom: 1.2rem;
}

.plan-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px; 
  margin-top: 24px;
  margin-bottom: 24px;
  width: 100%;
}

/* Compact Card Base Structure */
.plan-option {
  background: #12141A; 
  border: 1px solid #1E2025;
  border-radius: 12px;
  padding: 16px 14px; 
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
}
.plan-option:hover {
  border-color: #3A3F4A;
}
.plan-option.active {
  border: 1px solid #A93B3B;        
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.plan-option input[type="radio"] {
  appearance: auto;
  -webkit-appearance: radio;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
}
/* Inner Text Layouts */
.plan-card-content {
  display: flex;
  flex-direction: column;
  text-align: left;
  height: 100%;
  width: 100%;
}
.plan-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  flex-grow: 1;
}
.plan-name {
  font-size: 0.75rem; /* Font size and margins tightened */
  font-weight: 700;
  color: #C3C7CF;
  letter-spacing: 0.8px;
  margin-bottom: 8px; 
  text-transform: uppercase;
}

.plan-name.highlight-text {
  color: #E2756A; 
}
.plan-billing {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  flex-grow: 1;
}
.plan-price {
  font-size: 1.45rem; /* Large variation scaled down to look professional */
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 16px; 
  font-family: system-ui, -apple-system, sans-serif;
}

.plan-price .per-unit {
  font-size: 0.8rem;
  color: #7A808C;
  font-weight: 400;
}

.plan-price-text {
  font-size: 1.3rem;
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 16px;
}

/* Features List Details */
.plan-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #7A808C;
  margin-top: auto; 
}

.plan-feature svg {
  color: #7A808C;
  flex-shrink: 0;
}

.plan-feature.highlight-feature {
  color: #A3A9B5;
}

.plan-feature.highlight-feature svg {
  color: #E2756A; 
}

/* Badge System Control */
.recommended-badge {
  position: absolute;
  top: -10px; /* Aligned tight to matching modern box top border */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #E2353B 0%, #9B1C20 100%);
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 8px rgba(226, 53, 59, 0.2);
  white-space: nowrap;
}

.plan-badge-space {
  height: 6px; /* Reduced vertical space element */
}
/* Container layout for horizontal bubble lines */
.bus-circle-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: 100%;

}

/* Base bubble configuration setup */
.circle-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8E929B;
  background: transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.circle-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
}

/* Active Selected Ring configuration */
.circle-btn.active {
  background: #FF5A5F; /* Vibrant core accent matching the template */
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(255, 90, 95, 0.3);
  font-weight: 700;
}
.summary-card {
  background: var(--gray-100);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 1.2rem;
}
.summary-title {
  font-weight: 600;
  margin-bottom: 12px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 8px;
}
.summary-divider {
  height: 1px;
  background: var(--gray-300);
  margin: 8px 0;
}
.summary-row.total {
  font-weight: 700;
  font-size: 16px;
  color: var(--gray-900);
}

.success-screen {
  text-align: center;
  padding: 1rem 0;
}
.success-icon {
  color: #10b981;
  margin-bottom: 1rem;
}
.success-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.success-desc {
  color: var(--gray-500);
  margin-bottom: 1.5rem;
}

.credentials-card {
  background: var(--gray-100);
  border-radius: 8px;
  padding: 16px;
  text-align: left;
  margin-bottom: 12px;
}
.creds-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--accent);
}
.creds-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.creds-label {
  width: 70px;
  color: var(--gray-500);
}
.creds-value {
  font-family: monospace;
  font-weight: 500;
}
.btn-copy {
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  margin-left: 8px;
  padding: 4px;
}
.btn-copy:hover {
  color: var(--accent);
}
#busLimitHint {
  min-height: 2.5em;
}
.creds-note {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 1.2rem;
}